我正在使用html2canvas 0.4.0渲染屏幕截图,并希望将其另存为Web服务器上的图像。
为此,我编写了以下函数:
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方法是否要处理大量数据?
如果有人偶然发现了相同的问题,这就是我的解决方法:
问题取决于以下事实:大多数服务器将+URL中的URL解释为编码空间(例如%20)。因此,我需要先对数据进行编码,然后将其发送POST到我指定的PHP函数。
+
%20
POST
这是我的代码:
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; ?>