javascript - 无法将完整 Canvas 图像保存到服务器

Question

我在将 Canvas 图像保存到我的服务器时遇到问题。我已经尝试了多种方法，现在唯一可行的方法是使用我发现的一个建议，即填写表单中的隐藏文本字段并将其提交到我的 php 页面，该页面可以接收帖子并将其转换，然后将其保存在服务器上。虽然这确实有效，但它只发布了图像的 1/8。

当我检查 toDataURL() 内容时，它与传递到 PHP 页面的数据量相同，因此我不确定图像在哪里被分割，并且图像大小最终仅约为 380kb。

这是我所拥有的:

Javascript:

var canvas = document.getElementById("myCanvas");
var image = canvas.toDataURL();
document.getElementById("savecarddata").value = image;

PHP

$upload_dir = 'mydirectory'; 
$img = $_POST['savecarddata'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = $upload_dir.rand().".png";
$success = file_put_contents($file, $data);

这确实保存了图像，但仅保存了图像的顶部。我尝试过ajax，但似乎无法让它正常工作，所以这对我来说是下一个最佳解决方案。我希望得到任何帮助!

提前致谢!

Answer 1

我就是这样做的:

使用ajax

 var canvas = document.getElementById("myCanvas");
    var canvasData = canvas.toDataURL('image/png');
    var ajax = new XMLHttpRequest();            
    var postdata='saveimage.php';
    ajax.open('POST', postdata, false);
    ajax.setRequestHeader('Content-Type', 'application/upload');
    ajax.send(canvasData);  

然后在saveimage.php

if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))
{
$imgdata = $GLOBALS['HTTP_RAW_POST_DATA'];

    $filteredData=substr($imgdata, strpos($imgdata, ",")+1);// Remove the headers (data:,) part.
    $data = base64_decode($filteredData);//decode data
    $im = imagecreatefromstring($data); //create image
    if ($im !== false) { 
        imagesavealpha($im, true);
        imagepng($im, "result.png",9); 
    }
    else {
        echo 'An error occurred.';
    }

    }

您还可以在 ajax 中将参数作为 GET 变量传递

var postdata="saveimage.php?imagename=" + document.getElementById("someFeild").value;