通过jquery上传toDataUrl图片答案

【问题标题】：Upload toDataUrl image through jquery通过jquery上传toDataUrl图片
【发布时间】：2013-03-08 10:19:30
【问题描述】：

我正在尝试从我的画布中创建一个图像，但经过一些尝试后，我似乎无法在后端获得一个有效的上传 PNG。有人可以看看这里发生了什么吗？

我的javascript：

    stage.toDataURL({
    callback: function(dataUrl) {
        var imgURL = dataUrl; // keep the entire url
        $.ajax({
            type: "POST",
            url: "http://www.xxxx.nl/pointer/upload.php", 
            data: ({imgData : imgURL}),
            cache: false,
            success: function(result){
                //window.open(dataUrl); // Show result stage in a new window
                alert(result); // show php error if exists
            }
        });
    }
});

我现在真正基本的.php：

$im = imagecreatefrompng($_POST['imgData']);
header('Content-Type: image/png');
imagepng($im);
imagedestroy($im);

我的错误日志：

[Fri Mar 08 11:29:16 2013] [error] [client 24.132.214.139] mod_security: Access denied with code 500. Error reading request body, error code 70007: The timeout specified has expired [hostname "www.ccc.nl"] [uri "/pointer/upload.php"]

【问题讨论】：

您的 JavaScript 代码非常好。在 PHP 方面，您可以只使用 PHP-FileUpload 附带的 DataUriUpload。它记录在here。或者，您可以查看它的源代码。

标签： php jquery canvas kineticjs

【解决方案1】：

当你这样做时：

var canvasData = myCanvas.toDataURL("image/png");

你得到代表.png的base64编码字符串，像这样：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsCAYAAAB5fY51AAAGB………

请注意，此字符串的前缀是此标头：data:image/png;base64。 .png 文件不需要/无法识别此标头，并且会破坏 imagecreatefrompng()。因此，在保存此字符串以创建 .png 时，您必须去掉标题。在 php 端，您可以这样做（尽管您也可以在客户端将其剥离）：

$justPngData=substr($imageData, strpos($imageData, ",")+1);

然后正常继续……

【讨论】：