html2canvasで送信するときにフォームからスクリーンショットを作成

html2canvasで送信するときにフォームからスクリーンショットを作成しようとしています。これは、スクリーンショットを作成しているが、入力フォームフィールドが画面にオールウェイズ空でhtml2canvasで送信するときにフォームからスクリーンショットを作成

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

：

//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機能：私はこのコードを使用します。私は、テキストデータとしてそれをフェッチする方法の作業例を持っている

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

出典

2017-12-19 Mann87

経由でテキストにストリーミングされますか？ – Scuzzy

私は私の質問でそれを追加しました。しかし問題はsave_img関数ではないようです。 "document.body.appendChild（canvas）"は空の入力フィールドも表示するためです。 – Mann87

あなたのfuncitonはscreenshotデータを 'save_screen.php'に投稿してリダイレクトしますか？あなたのフォームにイメージデータを追加することはありません。私は 'console.log（res）'を追加し、開発者のコンソールでヒントを探します。 – Scuzzy

はこれを試してみてください。

約束キャンバスオブジェクト

は `save_img（）`のコードを含めてください 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>

出典

2017-12-19 02:18:31

onrenderedはもう動作していません私はそれがdepcreatedと思う – Mann87

私はそれを試して、それが動作しています。 –

：

出典

2017-12-19 02:29:43 Scuzzy

Ok問題が見つかりました。問題は、サイトの上部に画像があることです。画像がなければそれは機能する。あなたは見て、ここでそれをテストすることができます：https://liveweave.com/cJykDi – Mann87

ええ、私は彼らの例は、単にキャンバス要素としてDOMにスクリーンショットを追加するには役に立たないことがわかった。コールバックとして格納するためにそれを送信するか、フォームへのフィールドに生のテキストとして追加する必要があります。 – Scuzzy

html2canvasで送信するときにフォームからスクリーンショットを作成

答えて

関連する問題