html2canvasで画像を保存する - Pure Javascript

Question

pngでページをキャプチャして保存するためのボタンを作成しようとしています。

今のところ、私は必要な解像度で複製することができますが、代わりにダイアログを表示し、ファイル名を変更するために "名前を付けて保存..."のように保存する必要があります。

function myRenderFunction(canvas) { 
    destination.appendChild(canvas); 
} 

var element = document.getElementById('element'); 
var destination = document.getElementById('destination'); 



html2canvas(element, { 
    scale: 3, 
    onrendered: myRenderFunction 
}); 

ここに私の現在のプロセスのJSFiddleがあります。ローカル次に、あなたのレンダリング機能を変更することができ、画像を保存するには

Answer 1

：

function myRenderFunction(canvas){ 
    var a = document.createElement('a'); 
    // toDataURL defaults to png, so we need to request a jpeg, then convert for file download. 
    a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream"); 
    a.download = 'somefilename.jpg'; 
    a.click(); 
} 

これは、私は、ユーザーが選択することができますここで、「ウィンドウとして保存」を意味StackOverflowのHow to save img to user's local computer using HTML2canvas