无法将完整的画布图像保存到服务器

Question

我在将画布图像保存到服务器时遇到问题。 我已经尝试了多种方法，现在看来唯一可行的方法是使用一个建议，我发现环顾四周的建议是在表单中填充一个隐藏的文本字段，然后将其提交到我的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;

Answer 2

我不知道它是否相关，但是请检查如何设置画布的宽度和高度。 您应该将它们设置在canvas标签内。

<canvas width='yourValue' height='yourValue'></canvas>