我正在使用html2canvas 0.4.0渲染截图,并希望将其保存为我的网络服务器上的图像。
为此,我写了以下函数:
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() {
});
}
});
}
<?php
$image = $_POST['image'];
$filedir = $_POST['filedir'];
$name = time();
$decoded = base64_decode($image);
file_put_contents($filedir . "/" . $name . ".png", $decoded, LOCK_EX);
echo $name;
?>
在渲染画布后,我可以完美地将其附加到HTML正文,但将其保存在我的服务器上会导致损坏的(?)文件。
我可以在IrvanView中读取尺寸,但图像是透明/空的? 该文件大约2.076 KB。所以它并不是空的。
我也尝试使用JPEG,这会导致文件损坏,而IrfanView会说“假标记长度”。
屏幕截图的尺寸为650x9633。对于POST-Method来说有很多数据吗?
答案 0 :(得分:15)
如果有人遇到同样的问题,我就是这样解决的:
问题取决于以下事实:大多数服务器将URL中的+
解释为编码空间(如%20
)。所以我需要先对数据进行编码,然后通过POST
将其发送到我指定的PHP函数。
这是我的代码:
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);
});
}
});
}
<?php
$image = $_POST['image'];
$filedir = $_POST['filedir'];
$name = time();
$image = str_replace('data:image/png;base64,', '', $image);
$decoded = base64_decode($image);
file_put_contents($filedir . "/" . $name . ".png", $decoded, LOCK_EX);
echo $image;
?>
干杯!