Question

I’ve got an HTML5 Canvas. I .toDataURI it and send that off to PHP with AJAX. PHP stores that in a database.

Then I have a different page that has an img element to request that data from the database and render it. But it… won’t. The data’s getting through, I can see it with the browser’s view source function:

<img id="embedded" src="data:image/png;base64,iVBORw...5CYII=" />

(ellipsis added)

It’s not being truncated or anything stupid like that, I have document.write’s and echo’s in every script from where the data is generated by the canvas to where it’s embedded into the final element, and it’s getting through completely intact.

I’ve tried it with image URIs generated by other sources and there’s no problem. I’ve tested this in Chrome 12 and Firefox 5, behavior was identical in both.

A final oddity is that when the canvas is totally blank, the image data it generates IS displayed: I get a blank image with the same dimensions as the original canvas. But as soon as I draw anything on it, nothing. Just the familiar little error-loading-image icon.

This is my code for the receiving end:

http://pastebin.com/Hw1ykd1i

And for the sending end:

http://pastebin.com/hwsEfsaD

Answer 1

If I’ve fully understood your problem – you’re saying the receiver isn’t working (i.e. the thing that mirrors out the output).

You need to encode your data:

function postToServer(data) {
  data = "data=" + encodeURIComponent(data);
  // continue with XHR POST

This works with the blank canvas because it’s made up of letters without any symbols. As soon as you draw, the canvas base64 value has characters such as + in it, which in POST language means space. So if you encodeURIComponent your value, those symbols will get sent intact to your server, and the receiver thingy should be able to render the output correctly.