Javascript Can'；无法将完整画布图像保存到服务器

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

当我检查toDataURL（）内容时，传递到PHP页面的数据量是相同的，因此我不确定图像在哪里被切碎，图像大小仅为380kb

以下是我所拥有的：

Javascript:

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

PHP

这会保存图像，但仅保存图像的顶部。我已经尝试过ajax，但我似乎无法让它正常工作，所以这是我下一个最好的解决方案。我愿意得到任何帮助

---

提前谢谢

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

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

我就是这样做的：

使用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;

---

我确实发现，如果缩小图像大小，我可以保存整个图像，但分辨率很差，文本不可读。这可能会有所帮助：我知道画布设置得很大，但这主要是因为如果缩小（即300x420），而我保存整个图像，它很模糊，所以我一直在放大它，并使用它所在的div（.25）缩小它，以使它看起来合适的大小。不幸的是，由于某种原因，这不允许我保存这么大的图像（1200x1680），无论我如何尝试ajax，我似乎都无法获得正确的代码。我感谢你的建议。我不确定我只是没有正确地设置路径还是什么。我有一个saveimage.php文件，其中包含代码、appropiate标记和放在我网页上的javascript。我正在尝试获取saveimage文件和上载文件夹的正确路径。我想这可能就是问题所在。我得摆弄一下。我可以把完整的URL放在那些地方，直接指向我想要脚本的地方吗？我已经编辑了我的答案。很抱歉，这在很大程度上是从我的站点代码中复制的，我在其中使用了一个构建在canvas元素上的库。

toDataURL（'image/png'）

方法需要一个canvas对象（我以前将其作为

层

）。

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