PNG Data Url damaged after sending it with Ajax

Question

I wanted to send a PNG Data Url with Ajax to my PHP-Script but the Url on the Client Side is not the same that i recive with PHP.

$.ajax({
        url: "proceed.php",
        type: "post",
        data: "signature=" + signaturePad.toDataURL('image/png'),
        error: function(e) {
            alert("ERROR");
            console.log(e);
        },
        success: function(e) {
            alert(e);
        }
});

I think it gets damaged while sending - maybe a encoding problem?

I Already tried to encode the URL with JSON but it's the same problem...

data: "singature=" + JSON.stringify(signaturePad.toDataURL("image/png")

try `encodeURI(uri)`. – Ataur Rahman Munna Apr 25 '17 at 09:46 — Ataur Rahman Munna, Apr 25 '17 at 09:46

score 0 · Answer 1 · edited May 23 '17 at 12:17

I presume you are using HTML5's canvas.toDataUrl() as described here.

Your image data is not the same, because instead of sending the actual image, you are sending the data of the image that is painted on your site.

As the browser is throwing away unneeded data and (probably) keeping only RGBA and size information, the image you receive is understandably 'mangled'. Documentation also states that the image resolution will always be only 96 dpi.

There could also be problems arising from using URI component for transfer of "binary data" (these quotes are supposed to be huge). There seems to be no set lower or upper bound for URI component, as stated here. I would suggest using this technique only in case of small (IMHO around 40x40px) images.

Refer here on how to send bigger images over jQuery's $.ajax().

PNG Data Url damaged after sending it with Ajax

1 Answers1