canvas image to php

Question

I know this question was already here a lot, but none of solutions looks to be working for me. So, I am using Kinetics.js and I have build an canvas application where people can draw their images (pretty simple). The idea is that when image is ready user would go to the next page, but I need his drawing to be saved as a file at server.

Here is my code: JavaScript:

$('#someButton').click(function(){
hiddenCanvas.toDataURL({
        callback:function(dataUrl){
            $.ajax({
            type: "POST",
            url: "scripts/imgsave.php",
            data: {image: dataURL}
            });

            }
            });

    window.location = 'scripts/imgsave.php'; 
)};

And PHP:

if ( isset($_POST["image"]) && !empty($_POST["image"]) ) {    
$dataURL = $_POST["image"];  
$parts = explode(',', $dataURL);  
$data = $parts[1];  
$data = base64_decode($data);  
$fp = fopen('../images/test.png', 'w');  
fwrite($fp, $data);  
fclose($fp); 
}

The problem is, that whatever I do, PHP saves empty file on my server. So I guess the dataURL is not send properly. What could be the issue here?

This question has been answered in the following post: http://stackoverflow.com/questions/13198131/how-to-save-a-html5-canvas-as-image-on-a-server — user2699706, Sep 21 '13 at 23:37

score 1 · Answer 1 · answered Sep 22 '13 at 14:20

1

Your casing is incorrect:

The callback function creates dataUrl while your ajax call sends dataURL

BTW, it's good practice to extend your ajax call with .done and .fail callbacks ;)

answered Sep 22 '13 at 14:20

markE

102,905
11
164
176

score 0 · Answer 2 · answered Sep 24 '13 at 09:24

Updated code:

   $('#someButton').click(function(){
       hiddenCanvas.toDataURL({
           callback:function(dataUrl){
       $.ajax({
               type: "POST",
               url: "scripts/imgsave.php",
               data: {image: dataUrl}
             });

            }
           });

    window.location = 'scripts/imgsave.php'; 
)};

canvas image to php

2 Answers2