我试图通过php或ajax上传屏幕截图到服务器。但我无法找出屏幕截图是在哪里在html2canvas()?我已经搜索过了,但没有找到解决办法。请检查我的代码并指导我。
JS代码$(function () {
$("#btnSave").click(function () {
html2canvas($("#widget"), {
onrendered: function (canvas) {
theCanvas = canvas;
var image = canvas.toDataURL("image/jpeg");
$('#captured_img').attr("src", image);
$('#img_val').attr("value", image);
}
});
});
<<h2> HTML代码/h2><div id="widget" class="widget">
<h1>THE IMAGE</h1>
</div>
<input type="hidden" name="img_val" id="img_val" value=""/>
<div id="showImage">
<img id="captured_img" src="" height="120" width="100"/>
</div>
<input type="button" id="btnSave" value="Save PNG"/>
PHP脚本:
image/jpeg
不支持透明背景,使用image/png
html2canvas
将返回DOM
的canvas
,您可以使用canvas的toDataURL
方法获得base64
数据。要上传base64
作为图像,您需要解码base64数据。file_put_contents
将字符串写入文件使用如下脚本:
<?php
if (isset($_REQUEST['data'])) {
$img = $_REQUEST['data'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = rand(0000000, 1131231) . '.png';
$success = file_put_contents($file, $data);
if ($success!==false) {
echo 'done';
} else {
echo 'failed';
}
}
HTML,JS:
$(function() {
$("#btnSave").click(function() {
html2canvas(document.getElementById('widget'), {
onrendered: function(canvas) {
var image = canvas.toDataURL("image/png");
$('#captured_img').attr("src", image);
$('#img_val').attr("value", image);
$.post("decode.php", {
data: image
})
.done(function(data) {
alert("Status: " + data);
});
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="widget" class="widget">
<h1>THE IMAGE</h1>
</div>
<input type="hidden" name="img_val" id="img_val" value="" />
<div id="showImage">
<img id="captured_img" src="" height="120" width="100" />
</div>
<input type="button" id="btnSave" value="Save PNG" />
您的图像不是在任何文件系统中创建的,它只是分配给图像源的base64编码字符串canvas.toDataURL("image/jpeg");
。您可以将该字符串发送到ajax调用并在php函数中生成文件。有关如何从base64字符串创建图像的更多详细信息,请在php中下载到image的链接dataurl。