我在使用html2canvas提交时尝试从表单创建屏幕截图。我用这个代码：
//Create Screen
var element = $("#formmain");
var getCanvas;
html2canvas(document.querySelector("#formmain")).then(canvas => {
document.body.appendChild(canvas),
save_img(canvas.toDataURL('image/jpeg'))
});
save_img函数：
function save_img(data){
//ajax method.
$.post('save_screen.php', {data: data}, function(res){
//if the file saved properly, trigger a popup to the user.
if(res != ''){
yes = confirm('File saved in output folder, click ok to see it!');
if(yes){
location.href =document.URL+'temp/'+res+'.jpg';
}
}
else{
alert('something wrong');
}
});
}
它正在创建屏幕截图，但输入表单字段在屏幕中始终为空。
试试这个：
html2canvas(document.querySelector("#formmain"), {
onrendered: function(canvas) {
document.body.appendChild(canvas);
},
});
我有一个如何将其作为文本数据获取的工作示例。
promise画布对象通过toDataURL()函数流式传输到文本
<!DOCTYPE html>
<html>
<head>
<script src="http://localhost/html2canvas.js"></script>
</head>
<body>
<form id="capture">
<input type="text" value="hello world">
</form>
<textarea id="target"></textarea>
<script>
html2canvas(document.getElementById("capture")).then(function(canvas){
console.log(canvas);
document.body.appendChild(canvas);
document.getElementById('target').value = canvas.toDataURL("image/png").replace(/^data:image\/(png|jpg);base64,/,'');
});
</script>
</body>
</html>