0

I am trying to save an image created and placed in canvas, I have the following:

html:

<canvas id="example" class="test" style="width:600px;" data-id="0"></canvas>
<form name="saveForm" method="post">
    <input id="save" type="submit" value="save">
    <input type="hidden" id="imgData" name="imgData" value="">
</form>

Jquery:

$(document).on("click", "#save", function() {
    document.getElementById('imgData').value = canvas.toDataURL('image/png');
    document.forms["saveForm"].submit();
});

PHP:

if($_POST['imgData']){
    // echo "here"; die; // tried this but not firing so no data getting to hidden field
    $upload_dir = '/home/mydir/public_html/pages/test/imgEdit/';
    $img = $_POST['imgData'];
    $img = str_replace('data:image/png;base64,', '', $img);
    $img = str_replace(' ', '+', $img);
    $data = base64_decode($img);
    $file = $upload_dir."image_name.png";
    $success = file_put_contents($file, $data);
}

But its simply not working, nothing happens and no errors in inspector. Clearly from the echo test in the PHP the image data is not populating the hidden field on jquery click.

What am I missing?

StudioTime
  • 22,603
  • 38
  • 120
  • 207
  • @DavidJashi Hi, that post is talking about saving locally, this is clearly not, as the title suggests – StudioTime Jun 03 '13 at 09:55
  • OK, my bad. What HTTP server do you use? Do you have access to logs? – David Jashi Jun 03 '13 at 09:59
  • @DavidJashi Hi, Apache, and yeah, but the data is not posting to the hidden field in the JS, how would server logs help? – StudioTime Jun 03 '13 at 10:01
  • OK, what alert(document.getElementById('imgData').value); returns? – David Jashi Jun 03 '13 at 10:04
  • By the way, take a look at those: http://stackoverflow.com/questions/13198131/how-to-save-a-html5-canvas-as-image-on-a-server and http://stackoverflow.com/questions/6835837/how-to-save-a-html5-canvas-todataurl-as-a-png-file-on-the-server-using-seaside – David Jashi Jun 03 '13 at 10:06

0 Answers0