来自画布的无效base64字符串

Question

I'm making a web application that'll be used on an iPad. Users will be invited to color an image. I'm using html5 Canvas for this and basing the coloring on the tutorial I found HERE . Eventually I want to upload this image to a Database along with the name of the user.

How I'm doing it

When the user is done coloring he hits 'save' and I convert the canvas using toDataURL(). I then insert the data into an invisible form element and submit the form to go to a new page. Like so:

    document.getElementById('my_hidden').value = canvas.toDataURL('image/png');
    document.forms["form1"].submit();

Here I ask the user's name and e-mail. I also insert the canvas data into a new invisible form element. Like so:

    value="<?php echo $_POST['my_hidden'];?>"

I then submit this form to the database on the next php page. The canvas data is stored in a Blob.

This all works fine.

What's going wrong

When I try to display the image on that final page I get a 'Failed to load resource'-error on the image ('kCFErrorDomainCFNetwork error'). I'm trying to display it this way:

    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var image = new Image();

    image.src = "<?php echo str_replace("\n", "", $_POST['canvas']); ?>";
    ctx.drawImage(image, 0, 0);

Now I suspected that maybe the canvas data I got from the sever is bad. So I checked it this way:

    if ( base64_encode(base64_decode($canvas)) === $canvas){
       echo '$data is valid';
    } else {
       echo '$data is NOT valid';
    }

And it is, indeed, not valid. I then used that same method to check it after the first form and it's already invalid then. So I suppose either the first submitting through that hidden field is messing it up or the toDataURL() is.

I'm by no means an expert programmer but I'd hate to get this far and not finish this. So any help would be truly, greatly appreciated! Thanks.

Answer 1

Looks like you're forgetting to snip off the start of the data URI to leave yourself with just the data

var uri = canvas.toDataURL('image/png'),   // data:image/png;base64,blahblahblah
    b64 = uri.slice(uri.indexOf(',') + 1); // blahblahblah
document.getElementById('my_hidden').value = b64;