canvas.toDataURL（）を使用してキャンバスを画像として保存する方法

141

現在HTML5 Webアプリ/ 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>

— ワーデンクリフ
ソース

4

OPの質問には答えていません。彼はこれがPhonegap / iPad向けだとはっきり言った。与えられた答えは、デスクトップブラウザで保存するためのものです。

— tshm001

1

フォンギャップについてはわかりませんが、ネイティブiOSでは反対側でJavaScriptを使用してゼロからこれを実行し、でデータをキャプチャし.toDataURL()、次にwindow.locationを使用してブラウザーをにポイントしappname://[data url]ます。アプリ側では、UIWebViewには、ページをロードする必要があるかどうかを示すデリゲートメソッドがあります。私はappname://それが入ってくるときにそれを聞いて分解し、ページのロードを拒否し、ネイティブURLにデータURLをキャプチャします...実際のiOS / Objective Cコードにどれだけ精通していますか？

— Doug

121

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

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

— ユーザー1874941
ソース

1

IE9標準モードを除く：「このWebページの一部のコンテンツまたはファイルには、インストールしていないプログラムが必要です。」Internet Explorer 8以降は、CSS、<link>、および<img>の画像のデータURIのみをサポートします：developer.mozilla.org/en-US/docs/data_URIs

— Cees Timmerman

45

正常に動作します。ダウンロードしたファイルの名前を変更するにはどうすればよいですか？「ダウンロード」するだけで、拡張機能はありません。ありがとう！

— Leabdalla 2013年

1

Chromeでは、これによりブラウザがクラッシュします。画像を画像タグで表示すると機能しますが、右クリックメニューがグレー表示されるため、画像を保存できません。

— ココドコ、2014年

これはうまくいきます...しかし、Android（Galaxy S3のデフォルトブラウザー）では、画像をダウンロードしないだけですが、「ダウンロードしています...」というメッセージがずっと表示されます。

— Habrashat 14

：私はいくつかのいずれかが、私はこのリンクを見るのを助けることができ、問題のセーブ持っstackoverflow.com/questions/25131763/...

— ラメシュS

36

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

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();

— トーマスW
ソース

これをありがとう、それは私を大いに助けました！

— マイクムーン

22

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>

— SColvin
ソース

2

試してみただけで、名前も拡張子もないファイルがChromeに保存されます。

— Malber 2013

ここで言及したように、nihilogic.dk/labs/canvas2imageでファイル名を設定することは不可能のようです。現時点では、自分でファイル名を指定する必要があります。」

— SColvin 2013

1

投稿したリンクが壊れています

— Oliver Nybroe

9

これを試すことができます。ダミーの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();
}

— bmatovu
ソース

1

link要素の作成を含め、すべてがJSで行われたという事実が気に入っています。自動化の目的に

— 最適

完璧なソリューション

— Hidayt Rahman

8

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

ReImg.fromCanvas(yourCanvasElement).toPng()

— Gillyb
ソース

クールなライブラリ。ありがとう。ただし、サンプルドキュメントには小さな問題があります。私はあなたの注意を引くためにGithubに問題を開きました。

— jmknoll 2015年

7

これは私のために働きます：（google chromeのみ）

<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>

— 1000バギー
ソース

おそらく、コメントなしで単に貼り付けるのではなく、質問に答えるコードの部分を説明できますか？

— Gediminas Masaitis 2016

6

1000Bugyの答えに似ていますが、アンカーをオンザフライで作成してクリックイベントを手動でディスパッチする必要がないため、より簡単です（IEの修正も含まれます）。

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

これは（現在の）IEでは機能しません。ダウンロード属性を実装しておらず、データURIのダウンロードを妨げているためです。しかし、これは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());
  }
}

ここにフィドルがあります

— Sjeiti
ソース

1

代わりにimageElement.src = myImage;使用する必要がありますwindow.location = myImage;

そしてその後もブラウザは画像自体を表示します。右クリックして「リンクを保存」を使用して画像をダウンロードできます。

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

— ハカン・セルセ
ソース

うわー、ありがとう、それは本当に非常に役に立ちました:)しかし、ポップアップ保存ボックスを取得して、誰かが特定の宛先（Androidイメージフォルダーなど）に保存できるようにするにはどうすればよいですか？

— Wardenclyffe、2012年

特定のブラウザによって異なります。Androidブラウザーは通常、インスタンスを作成するために、ファイルを特定のフォルダーに直接ダウンロードします。

— Hakan Serce 2012年

Chromeではこれは機能しますが、右クリックメニューはグレー表示されます。ブラウザから画像を「ドラッグ」しようとすると、Chromeがクラッシュします。

— ココドコ、2014年

groups.google.com/a/chromium.org/forum/#!topic/blink-dev/…このようなデータURLを開くと、次のようにブロックされます。

— KeyOfJ '19 / 06/19

0

Cordovaで実行している場合、前述の方法を使用してイメージをダウンロードすることはできません。Cordova File Pluginを使用する必要があります。これにより、保存先を選択し、さまざまな永続性設定を活用できます。詳細はこちら：https : //cordova.apache.org/docs/en/latest/reference/cordova-plugin-file/

または、画像をbase64に変換してから文字列をlocalStorageに保存することもできますが、画像が多い場合や高解像度の場合は、割り当てがすぐにいっぱいになります。

— BigBalli
ソース

-9

@Wardenclyffeと@SColvinの両方が、キャンバスのコンテキストを使用するのではなく、キャンバスを使用して画像を保存しようとしています。どちらもctx.toDataURL（）;を試す必要があります。これを試して：

var canvas1 = document.getElementById("yourCanvasId");  <br>
var ctx = canvas1.getContext("2d");<br>
var img = new Image();<br>
img.src = ctx.toDataURL('image/png');<br>
ctx.drawImage(img,200,150);<br>

また、次のリンクを参照することもできます。

http://tutorials.jenkov.com/html5-canvas/todataurl.html

http://www.w3.org/TR/2012/WD-html5-author-20120329/the-canvas-element.html#the-canvas-element

— ヴィネイ・チャンドラ
ソース

Uncaught TypeError：オブジェクト＃<CanvasRenderingContext2D>には 'toDataURL'メソッドがありません。

— Brandon Aubie

これは間違っています。コンテキスト要素にdeveloper.mozilla.org/en-US/docs/Web/API/…というtoDataURL関数がないためです。あなたは、呼び出したい：canvas要素にdeveloper.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/...toDataURL

— Crashalot