画布图像到 php答案

【问题标题】：canvas image to php画布图像到 php
【发布时间】：2013-09-21 23:18:16
【问题描述】：

我知道这个问题已经出现了很多，但似乎没有一个解决方案适合我。所以，我正在使用 Kinetics.js 并且我已经构建了一个画布应用程序，人们可以在其中绘制他们的图像（非常简单）。这个想法是，当图像准备好后，用户会转到下一页，但我需要将他的绘图保存为服务器上的文件。

这是我的代码： JavaScript：

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

            }
            });

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

还有 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); 
}

问题是，无论我做什么，PHP 都会在我的服务器上保存空文件。所以我猜 dataURL 没有正确发送。这可能是什么问题？

【问题讨论】：

此问题已在以下帖子中得到解答：stackoverflow.com/questions/13198131/…

标签： php jquery canvas kineticjs

【解决方案1】：

你的大小写不正确：

当您的 ajax 调用发送 dataURL 时，回调函数会创建 dataUrl

顺便说一句，使用 .done 和 .fail 回调扩展 ajax 调用是一种很好的做法；）

【讨论】：

【解决方案2】：

更新代码：

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

            }
           });

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

【讨论】：