176

現在、HTML5 Web アプリ/Phonegap ネイティブ アプリを構築していますが、キャンバスを .NET で画像として保存する方法がわかりません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

12 に答える 12

164

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

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
于 2013-03-28T15:16:41.000 に答える
25

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>
于 2012-05-20T12:39:56.050 に答える
10

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

ReImg.fromCanvas(yourCanvasElement).toPng()

于 2015-08-28T10:10:14.120 に答える
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>
于 2016-03-03T21:28:40.000 に答える
1

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

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

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

于 2012-05-20T11:58:26.590 に答える
0

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

別の方法として、画像を base64 に変換してから文字列をlocalStorageに保存することもできますが、画像が多い場合や高解像度の場合は、クォータがすぐにいっぱいになってしまいます。

于 2020-06-19T14:56:06.623 に答える
-8

@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

于 2013-02-21T09:22:35.013 に答える