web-dev-qa-db-ja.com

HTML2canvasを使用してユーザーのローカルコンピューターに画像を保存する方法

HTML2canvas .4.1でスクリーンショットonclickをレンダリングしており、ユーザーのローカルコンピューターに画像を保存したい。どうすればこれを達成できますか？私は初心者なので、実際のコードは私にとって最も役立つことに注意してください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="html2canvas.js"></script>

<button id="save_image_locally">download img</button>

   <div id="imagesave">
      <img id='local_image' src='img1.jpg'>
   </div>

<script>

    $('#save_image_locally').click(function(){

            html2canvas($('#imagesave'), 
             {
                onrendered: function (canvas) {
                    var img = canvas.toDataURL("image/png");
                    alert('This will currently open image in a new window called "data:". Instead I want to save to users local computer. Ideally as a jpg instead of png.');
                    window.open(img);
                }
             });
            });

</script>
html2canvas
20
TheGrayVacuum

注：この回答は2015年からのもので、ライブラリは更新されています。
現在の実装については、以下の回答を確認してください。

これを試してください（Safariは画像をダウンロードする代わりに同じタブで開きます。ダウンロード属性はSafariではサポートされていません）

<script>

  $('#save_image_locally').click(function(){
    html2canvas($('#imagesave'), 
    {
      onrendered: function (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();
      }
    });
  });

</script>
42
2pha

更新2018

Html2Canvasの新しいバージョンでは、onrenderedオプションは 非推奨 で、promiseに置き換えられます。

ユーザーのコンピューターにイメージをダウンロードできるようにするには、次のようなものを使用できます。

HTML

<html>
    <head></head>
    <body>
        <div id="boundary">
            <div class="content">
                <p>My content here</p>
            </div>
        </div>

        <button id="download">Download</button>

    </body>
</html>

Javascript

Krzysztof answerに基づく

document.getElementById("download").addEventListener("click", function() {

    html2canvas(document.querySelector('#boundary')).then(function(canvas) {

        console.log(canvas);
        saveAs(canvas.toDataURL(), 'file-name.png');
    });
});


function saveAs(uri, filename) {

    var link = document.createElement('a');

    if (typeof link.download === 'string') {

        link.href = uri;
        link.download = filename;

        //Firefox requires the link to be in the body
        document.body.appendChild(link);

        //simulate click
        link.click();

        //remove the link when done
        document.body.removeChild(link);

    } else {

        window.open(uri);

    }
}

発生した問題

確かに私は画像をダウンロードできましたが、それはblankでした...これの考えられる原因は（少なくとも私の場合）コンテンツがラッパー（id = "＃boundary"）には幅や高さが定義されていないため、heightおよびwidthからcontent wrapperへ私にとってのトリック。

お役に立てれば

11
chebaby