wake-up-neo.com

Wie speichere ich Canvas als Bild mit canvas.toDataURL ()?

Ich erstelle gerade eine native HTML5-Web-App/Phonegap-App und kann anscheinend nicht herausfinden, wie ich meine Zeichenfläche mit canvas.toDataURL() als Bild speichern kann. Kann mir jemand helfen?

Hier ist der Code, was ist daran falsch?

// Meine Leinwand hieß "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>
118
Wardenclyffe

Hier ist ein Code. ohne fehler.

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

Mit dieser Lösung können Sie den Namen der heruntergeladenen Datei ändern:

HTML:

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

JAVASCRIPT:

  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();
24
Thomas W

Sie können canvas2image verwenden, um zum Download aufzufordern.

Ich hatte das gleiche Problem, hier ist ein einfaches Beispiel, das sowohl das Bild zur Seite hinzufügt als auch den Browser zum Herunterladen zwingt:

<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

Diese Arbeit für mich: (Nur 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>
7
1000Bugy

Ich habe eine kleine Bibliothek erstellt, die dies erledigt (zusammen mit einigen anderen praktischen Konvertierungen). Es heißt reimg und ist sehr einfach zu benutzen.

ReImg.fromCanvas(yourCanvasElement).toPng()

7
gillyb

Ähnlich wie 1000Bugys Antwort , aber einfacher, da Sie keinen Anker im laufenden Betrieb erstellen und ein Klickereignis manuell auslösen müssen (plus ein IE fix).

Wenn Sie Ihren Download-Button zu einem Anker machen, können Sie ihn direkt vor dem Ausführen der Standard-Anker-Funktionalität hochbocken. Also onAnchorClick können Sie den Anker href auf das Canvas Base64-Bild und das Anker-Download-Attribut auf das setzen, was Sie Ihrem Bild einen Namen geben möchten.

Dies funktioniert nicht in (dem aktuellen) IE), da es das Download-Attribut nicht implementiert und das Herunterladen von Daten verhindert. Dies kann jedoch mit window.navigator.msSaveBlob Behoben werden.

Der Ereignishandler für Ankerklicks lautet also wie folgt (wobei anchor, canvas und fileName Bereichssuchen sind):

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

Hier ist eine Geige

5
Sjeiti

Sie können dies versuchen; Erstellen Sie einen Dummy-HTML-Anker und laden Sie das Bild wie folgt herunter ...

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

Hier ist die Geige

3
bmatovu

Anstatt imageElement.src = myImage; du solltest benutzen window.location = myImage;

Und selbst danach zeigt der Browser das Bild selbst an. Sie können mit der rechten Maustaste klicken und mit "Link speichern" das Bild herunterladen.

Überprüfen Sie dieser Link für weitere Informationen.

1
Hakan Serce