如何将图像从canvas标记保存到php服务器？

小编典典

如何将图像从canvas标记保存到php服务器？

ajax

我有这样的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文件图像？我的代码有什么问题？

阅读 237

2020-07-26

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

我非常确定有解决此问题的更优雅的方法，但这一直对我有用！

2020-07-26