html2canvas保存图像不起作用

我正在使用html2canvas 0.4.0渲染屏幕截图，并希望将其保存为我的网络服务器上的图像。

为此，我编写了以下函数：

JavaScript的

function screenShot(id) { html2canvas(id, { proxy: "https://html2canvas.appspot.com/query", onrendered: function(canvas) { $('body').append(canvas); // This works perfect... var img = canvas.toDataURL("image/png"); var output = img.replace(/^data:image\/(png|jpg);base64,/, ""); var Parameters = "image=" + output + "&filedir=" + cur_path; $.ajax({ type: "POST", url: "inc/saveJPG.php", data: Parameters, success : function(data) { console.log(data); } }).done(function() { }); } }); } 

saveJPG.php

渲染canvas后，我可以完美地将其附加到HTML正文，但将其保存在我的服务器上会导致损坏的（？）文件。

我可以在IrvanView中读取尺寸，但图像是透明的/空的吗？ 该文件大约2.076 KB。 所以它并不是空洞的。

我也尝试使用JPEG格式，这会导致文件损坏，而IrfanView则会出现类似“伪标记长度”的内容。

屏幕截图的尺寸为650×9633。 POST方法的数据是多少？

Answer 1

万一有人偶然发现同样的问题，这就是我如何解决它：

问题取决于以下事实：大多数服务器将URL中的+解释为编码空间（如%20 ）。 所以我需要先对数据进行编码，然后通过POST将其发送到我指定的PHP函数。

这是我的代码：

JavaScript的

 function screenShot(id) { html2canvas(id, { proxy: "https://html2canvas.appspot.com/query", onrendered: function(canvas) { var img = canvas.toDataURL("image/png"); var output = encodeURIComponent(img); var Parameters = "image=" + output + "&filedir=" + cur_path; $.ajax({ type: "POST", url: "inc/savePNG.php", data: Parameters, success : function(data) { console.log("screenshot done"); } }).done(function() { //$('body').html(data); }); } }); } 

savePNG.php

干杯!