web-dev-qa-db-ja.com

divの画像を生成し、名前を付けて保存

次の入力ボタン「画像を保存」を作成したいと思います。

  1. divのスクリーンショットを撮ります
  2. ユーザーのコンピューターで「名前を付けて保存」を要求します

Html2canvasを使用してダイビングの画面を作成し、新しいタブで開く方法を見つけました。

function printDiv2(div)
{
    html2canvas((div), {
        onrendered: function(canvas) {
            var img = canvas.toDataURL();
            window.open(img);
      }
    });
}

しかし、一部として保存するのは難しい部分です... JS（およびオブジェクト）コーディングの初心者であるため、興味深いトピックを見つけましたが、少し混乱しています... 'FileSaver.jsを使用し、新しいblobを作成する必要があります http://eligrey.com/blog/post/saving-generated-files-on-the-client-side/

しかし、html2canvasにsaveAsを実装する方法、新しいblobを適切にキャストする方法がわかりません...

function printDiv2(div)
{
    html2canvas((div), {
        onrendered: function(canvas) {
            var img = canvas.toDataURL();
            window.open(img);

            var blob = new Blob(img, {type: "image/jpeg"});
            var filesaver = saveAs(blob, "my image.png");
      }
    });
}

また、base64で生成されたURLを抽出して、これを使って何かを試みましたが、すべてを理解するには複雑すぎます： http://bl.ocks.org/nolanlawson/0eac306e4dac2114c752

しかし、誰かが私にいくつかのヒントを教えてくれて、私を助けてくれますか？

javascriptbase64blobhtml2canvasfilesaver.js
14
Jaggana

最終的なコードは次のとおりです。

function PrintDiv(div)
{
    html2canvas((div), {
        onrendered: function(canvas) {
            var myImage = canvas.toDataURL();
            downloadURI(myImage, "MaSimulation.png");
      }
    });
}

function downloadURI(uri, name) {
    var link = document.createElement("a");

    link.download = name;
    link.href = uri;
    document.body.appendChild(link);
    link.click();   
    //after creating link you should delete dynamic link
    //clearDynamicLink(link); 
}
6
Jaggana

このアプローチを行うことができます：

    //Creating dynamic link that automatically click
    function downloadURI(uri, name) {
        var link = document.createElement("a");
        link.download = name;
        link.href = uri;
        link.click();
        //after creating link you should delete dynamic link
        //clearDynamicLink(link); 
    }

    //Your modified code.
    function printToFile(div) {
        html2canvas(div, {
            onrendered: function (canvas) {
                var myImage = canvas.toDataURL("image/png");
                //create your own dialog with warning before saving file
                //beforeDownloadReadMessage();
                //Then download file
                downloadURI("data:" + myImage, "yourImage.png");
            }
        });
    }
9
Paweł Głowacz

これは私には問題ありません。

function downloadURI(uri, name) {
    var link = document.createElement("a");

    link.download = name;
    link.href = uri;
    document.body.appendChild(link);
    link.click();
    clearDynamicLink(link); 
}

function DownloadAsImage() {
    var element = $("#table-card")[0];
    html2canvas(element).then(function (canvas) {
        var myImage = canvas.toDataURL();
        downloadURI(myImage, "cartao-virtual.png");
    });
}
1
Leandro Costa

見たことがありますか

http://eligrey.com/demos/FileSaver.js/

それはあなたが必要なことをするように見えます

1
Matt Bryson