CODEWITHSUNDEEP
phpjquerycanvaskineticjs
Maxim Ershov
Maxim Ershov

Reputation: 1284

canvas image to php

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?

Upvotes: 0

Views: 1030

Answers (2)

Jyoti Prakash
Jyoti Prakash

Reputation: 1260

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'; 
)};

Upvotes: 0

markE
markE

Reputation: 105015

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 ;)

Upvotes: 1

Related Questions