无法将完整画布图像保存到服务器 - Can't save full canvas image to server

Can't save full canvas image to server

我在将画布图像保存到服务器时遇到问题。我已经尝试了多种方法，现在似乎唯一有效的是使用我发现的一个建议，即在表单中填写隐藏的文本字段并将其提交到我的 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，但我似乎无法让它正常工作，所以这对我来说是下一个最佳解决方案。我希望得到任何帮助！

提前感谢！

我就是这样做的：

使用阿贾克斯

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

然后在保存图像中.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;

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

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