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

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

javascript php jquery forms

Javascript 使用html2canvas提交时从表单创建屏幕截图,javascript,php,jquery,forms,html2canvas,Javascript,Php,Jquery,Forms,Html2canvas,我尝试在使用html2canvas提交时从表单创建一个屏幕截图。我使用以下代码： //Create Screen var element = $("#formmain"); var getCanvas; html2canvas(document.querySelector("#formmain")).then(canvas => { document.body.appendChild(canvas), save_img(canvas.toDataURL('image/jp

我尝试在使用html2canvas提交时从表单创建一个屏幕截图。我使用以下代码：

//Create Screen
var element = $("#formmain");
var getCanvas;
html2canvas(document.querySelector("#formmain")).then(canvas => {
    document.body.appendChild(canvas),
    save_img(canvas.toDataURL('image/jpeg'))
});

保存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 canvas对象通过

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>


html2canvas（document.getElementById（“capture”））.then（函数（画布）{
console.log（canvas）；
document.body.appendChild（画布）；
document.getElementById（'target'）。value=canvas.toDataURL（“image/png”）。替换（/^data:image\/（png | jpg）；base64，/，''）；
});

请包括

保存img（）

的代码？我在问题中添加了它。但问题似乎不是save_img函数。因为“document.body.appendChild（canvas）”也显示空的输入字段。所以您的函数将屏幕截图数据发布到

save\u screen.php

然后重定向？它不会向表单中添加任何图像数据。我将添加

console.log（res）

并在开发人员控制台中查找提示。是的，对于测试，我将图像作为副本放在#formmain（“document.body.appendChild（canvas）”）下，但在该画布中，表单的输入字段也是空的。但举例来说，checkbox正在工作。onrendered不再工作了。我认为是depcreatedOk我发现了问题。问题是，我在网站顶部有一个图像。如果没有图像，它就会工作。您可以在这里看到并测试它：是的，我发现他们的示例只是将屏幕截图作为画布元素附加到dom中是非常无用的。您需要将其作为回调发送存储，或者将其作为原始文本添加到表单的字段中。