如何将图像从画布标签保存到 php 服务器？答案

【问题标题】：How save image from canvas tag to php server?如何将图像从画布标签保存到 php 服务器？
【发布时间】：2012-12-11 00:33:28
【问题描述】：

我有一个这样的 javascript 代码

var testCanvas = document.getElementById('canvas-1');
var canvasData = testCanvas.toDataURL("image/png");
var ajax = new XMLHttpRequest();
ajax.open("POST",'http://www.domain.com/imgsave.php',true);
ajax.setRequestHeader('Content-Type', 'canvas/upload');
ajax.send("canvasData"+canvasData );

我的php代码是这样的

if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))
{
    // Get the data
    $imageData=$GLOBALS['HTTP_RAW_POST_DATA'];

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

    $unencodedData=base64_decode($filteredData);
    $fp = fopen( 'test.png', 'wb' );
    fwrite( $fp, $unencodedData);
    fclose( $fp );
        echo "saved";
}
  else{

  echo "no raw data";
  }

执行此代码时，我得到了一个零大小的 png 文件图像？我的代码有什么问题？

【问题讨论】：

当然你检查了$unencodedData 不是空的，对吧？

标签： php javascript ajax html

【解决方案1】：

我最近不得不自己做。

首先，我将 canvasData 放入一个隐藏字段并将其发布到我的 PHP 页面。

它以这种格式返回：data:image/png;base64,iVBORw0......

您需要先拆分数据，因为：data:image/png;base64, 是标头信息。剩下的就是编码数据了。

$rawData = $_POST['imageData'];
$filteredData = explode(',', $rawData);

$unencoded = base64_decode($filteredData[1]);

然后我在我的服务器上创建图像：

//Create the image 
$fp = fopen('sigs/test1.png', 'w');
fwrite($fp, $unencoded);
fclose($fp);

然后阅读它来做任何我想做的事情。

$file_name = 'test1.png';
$file_size = strlen($filteredData[1])/1024; //This may be wrong, doesn't seem to break for me though.


$fh = fopen('sigs/test1.png', 'r');
$content = fread($fh, $file_size);
$content = base64_encode($content);
fclose($fh);

我非常确定有一个更优雅的解决方案，但这对我有用！

查看更多信息（可能）：My own question

【讨论】：

【解决方案2】：

这是我通过 ajax 从画布中保存图像的方法。我在客户端使用 jQuery

 jQuery.ajax({
     url: 'save.php',
     type: 'POST',
     data: {
         data: c.toDataURL('image/png')
     },
     complete: function(data, status)
     {
         if(status=='success')
         {
            alert('saved!');
         }
         alert('Error has been occurred');
     }

 });

php:

    $based64Image=substr($_POST['data'], strpos($_POST['data'], ',')+1);

    $image = imagecreatefromstring(base64_decode($based64Image));

    $fileName='';
    if($image != false)
    {
        $fileName=time().'.png';
        if(!imagepng($image, $fileName))
        {
//          fail;
        }
    }
    else
    {
//          fail;
    }

我希望这会有所帮助。

【讨论】：

【解决方案3】：

根据comment in the manual，要获取HTTP_RAW_POST_DATA，您需要执行以下操作：

<?php $postdata = file_get_contents("php://input"); ?>

手册中提到了诸如php://input 之类的包装器：

对于 POST 请求，最好使用 php://input 而不是 $HTTP_RAW_POST_DATA 因为它不依赖于特殊的 php.ini 指令。

【讨论】：