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

我尝试使用html2canvas从表单创建屏幕截图。
我使用此代码:</ p>

  //创建Screen 
var element = $(“#formmain”);
var getCanvas;
html2canvas(document.querySelector(“#formmain”))。then(canvas =&gt; {
document.body.appendChild(canvas),
save_img(canvas.toDataURL('image / jpeg'))
});
</ code> </ pre>

save_img function:</ p>

  function save_img(data){
// ajax method。
$ .post('save_screen.php',{data:data},function(res) ){
//如果文件保存正确,则向用户触发弹出窗口。
if(res!=''){
yes = confirm('文件保存在输出文件夹中,单击确定查看!' );
if(是){
location.href = document.URL +'temp /'+ res +'。jpg';
}
}
其他{
alert('出错了'); \ n}
});
}
</ code> </ pre>

它正在创建屏幕截图,但输入表单字段总是为emp ty
in screens。</ p>
</ div>

展开原文

原文

I try to create a screenshot from a form when submitting with html2canvas. I use this code:

//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:

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');
        }
    });
}

It is creating a screenshot but the input form fields are allways empty in screens.

dtgr6303
dtgr6303 是的测试我将图像作为副本放在#formmain(“document.body.appendChild(canvas)”)下,但在此画布中,表单中的输入字段为空。但是例如复选框正在工作。
2 年多之前 回复
doutuanxiao4619
doutuanxiao4619 那么你的功能将屏幕截图数据发布到save_screen.php然后重定向?它不会将任何图像数据添加到您的表单。我将添加console.log(res)并在开发人员控制台中查找提示。
2 年多之前 回复
dpbrrczhlwbv849228
dpbrrczhlwbv849228 我在我的问题中添加了它。但问题似乎不是save_img函数。因为“document.body.appendChild(canvas)”也显示空输入字段。
2 年多之前 回复
drutcs7210
drutcs7210 请包含save_img()的代码?
2 年多之前 回复

2个回答



试试这个:</ p>

  html2canvas(document.querySelector(“#formmain”)  ,{
onrendered:function(canvas){
document.body.appendChild(canvas);
},
});
</ code> </ pre>
</ div>

展开原文

原文

Try this:

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

dongnianwo8289
dongnianwo8289 我尝试了它,它正在工作。
2 年多之前 回复
duanchu9914
duanchu9914 onrendered不再工作我认为它已被弃用
2 年多之前 回复



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

promise canvas对象通过 toDataURL()</ code>函数</ p>

 &lt;!DOCTYPE html&gt; 
&lt; html&gt;
&lt; head&gt ;
&lt; script src =“http://localhost/html2canvas.js”&gt;&lt; / script&gt;
&lt; / head&gt;
&lt; body&gt;

&lt; form id =“capture “&gt;
&lt; input type =”text“value =”hello world“&gt;
&lt; / form&gt;

&lt; textarea id =”target“&gt;&lt; / textarea&gt;
\ n&lt; script&gt;
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,/,'');
});
&lt; / script&gt;

&lt; / body&gt;
&lt; / html&gt;
</ code> </ pre>
</ div>

展开原文

原文

I've got a working example of how to fetch it as text data.

The promise canvas object is streamed to text via the toDataURL() function

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

drne47241
drne47241 是的,我发现他们的例子只是将屏幕截图作为画布元素附加到dom中是没用的。 您需要将其作为回调发送存储,或者将其作为原始文本添加到表单的字段中。
2 年多之前 回复
duanlieshuang5330
duanlieshuang5330 好的我发现了问题。 问题是,我在网站上有一个图像。 没有图像就可以了。 你可以在这里看到并测试它:liveweave.com/cJykDi
2 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问