Question

我尝试使用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');
        }
    });
}

它正在创建屏幕截图，但输入表单字段总是空的在屏幕上。

Answer 1

试试这个：

html2canvas(document.querySelector("#formmain"), {
       onrendered: function(canvas) {
       document.body.appendChild(canvas);
    },
});

Answer 2

我有一个如何将其作为文本数据获取的工作示例。

通过toDataURL()函数

将promise画布对象流式传输到文本

<!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>

使用html2canvas提交时，从表单创建屏幕截图

2 个答案: