web-dev-qa-db-ja.com

canvas.toDataURL（）を使用してキャンバスをイメージとして保存する方法

私は現在HTML5ウェブアプリ/ PhoneGapネイティブアプリを構築しています、そして私はキャンバスをcanvas.toDataURL()で画像として保存する方法を理解することができないようです。誰かが私を手伝ってくれる？

ここにコードがあります、それが何が悪いのですか？

//私のキャンバスは "canvasSignature"という名前でした

JavaScript：

function putImage()
{
  var canvas1 = document.getElementById("canvasSignature");        
  if (canvas1.getContext) {
     var ctx = canvas1.getContext("2d");                
     var myImage = canvas1.toDataURL("image/png");      
  }
  var imageElement = document.getElementById("MyPix");  
  imageElement.src = myImage;                           

}

HTML5：

<div id="createPNGButton">
    <button onclick="putImage()">Save as Image</button>        
</div>
javascripthtml5cordovacanvassave
114
Wardenclyffe

ここにいくつかのコードがあります。エラーなしで。

var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");  // here is the most important part because if you dont replace you will get a DOM 18 exception.


window.location.href=image; // it will save locally
101
user1874941

ダウンロードを促すには、 canvas2image を使用できます。

私は同じ問題を抱えていました、これはページに画像を追加し、ブラウザにそれをダウンロードさせるという両方の簡単な例です：

<html>
    <head>
        <script src="http://hongru.github.io/proj/canvas2image/canvas2image.js"></script>
        <script>
            function draw(){
                var canvas = document.getElementById("thecanvas");
                var ctx = canvas.getContext("2d");
                ctx.fillStyle = "rgba(125, 46, 138, 0.5)";
                ctx.fillRect(25,25,100,100); 
                ctx.fillStyle = "rgba( 0, 146, 38, 0.5)";
                ctx.fillRect(58, 74, 125, 100);
            }

            function to_image(){
                var canvas = document.getElementById("thecanvas");
                document.getElementById("theimage").src = canvas.toDataURL();
                Canvas2Image.saveAsPNG(canvas);
            }
        </script>
    </head>
    <body onload="draw()">
        <canvas width=200 height=200 id="thecanvas"></canvas>
        <div><button onclick="to_image()">Draw to Image</button></div>
        <image id="theimage"></image>
    </body>
</html>
22
SColvin

このソリューションでは、ダウンロードしたファイルの名前を変更できます。

HTML：

<a id="link"></a>

ジャバスクリプト：

  var link = document.getElementById('link');
  link.setAttribute('download', 'MintyPaper.png');
  link.setAttribute('href', canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"));
  link.click();
22
Thomas W

この仕事は私のために：（グーグルクロムだけ）

<html>
<head>
    <script>
            function draw(){
                var canvas = document.getElementById("thecanvas");
                var ctx = canvas.getContext("2d");
                ctx.fillStyle = "rgba(125, 46, 138, 0.5)";
                ctx.fillRect(25,25,100,100);
                ctx.fillStyle = "rgba( 0, 146, 38, 0.5)";
                ctx.fillRect(58, 74, 125, 100);
            }

            function downloadImage()
            {
                var canvas = document.getElementById("thecanvas");
                var image = canvas.toDataURL();

                var aLink = document.createElement('a');
                var evt = document.createEvent("HTMLEvents");
                evt.initEvent("click");
                aLink.download = 'image.png';
                aLink.href = image;
                aLink.dispatchEvent(evt);
            }
    </script>
</head>
<body onload="draw()">
    <canvas width=200 height=200 id="thecanvas"></canvas>
    <div><button onclick="downloadImage()">Download</button></div>
    <image id="theimage"></image>
</body>
</html>
7
1000Bugy

私はこれを行う小さなライブラリを（他の便利な変換と一緒に）作成しました。これは reimg と呼ばれ、使い方はとても簡単です。

ReImg.fromCanvas(yourCanvasElement).toPng()

7
gillyb

1000Bugy's answer に似ていますが、その場でアンカーを作成して手動でクリックイベントを送出する必要がないので（より簡単なのでIE） _ fix）。

ダウンロードボタンをアンカーにすると、デフォルトのアンカー機能が実行される直前にそれをハイジャックできます。そのため、onAnchorClickを使用すると、アンカーのhrefをキャンバスのbase64イメージに設定し、アンカーのダウンロード属性をイメージの名前に設定できます。

Download属性を実装せず、データのダウンロードを妨げるので、これは（現在の）IEでは機能しません。しかし、これは代わりにwindow.navigator.msSaveBlobを使用することで修正できます。

そのため、アンカークリックイベントハンドラは次のようになります（anchor、canvas、およびfileNameはスコープ参照です）。

function onClickAnchor(e) {
  if (window.navigator.msSaveBlob) {
    window.navigator.msSaveBlob(canvas.msToBlob(), fileName);
    e.preventDefault();
  } else {
    anchor.setAttribute('download', fileName);
    anchor.setAttribute('href', canvas.toDataURL());
  }
}

これが フィドル

4
Sjeiti

imageElement.src = myImage;の代わりにwindow.location = myImage;を使うべきです

その後も、ブラウザは画像自体を表示します。画像をダウンロードするには、右クリックして[リンクを保存]を使用します。

詳しくは このリンク を確認してください。

1
Hakan Serce

これを試すことができます。ダミーのHTMLアンカーを作成し、そこから画像をダウンロードします。

// Convert canvas to image
document.getElementById('btn-download').addEventListener("click", function(e) {
    var canvas = document.querySelector('#my-canvas');

    var dataURL = canvas.toDataURL("image/jpeg", 1.0);

    downloadImage(dataURL, 'my-canvas.jpeg');
});

// Save | Download image
function downloadImage(data, filename = 'untitled.jpeg') {
    var a = document.createElement('a');
    a.href = data;
    a.download = filename;
    document.body.appendChild(a);
    a.click();
}

これが フィドル です

1
bmatovu