web-dev-qa-db-fra.com

Comment enregistrer le canevas en tant qu'image avec canvas.toDataURL ()?

Je suis en train de créer une application Web HTML5/une application native Phonegap et je n'arrive pas à comprendre comment enregistrer ma toile en tant qu'image avec canvas.toDataURL(). Quelqu'un peut m'aider?

Voici le code, qu'est-ce qui ne va pas?

// Ma toile s'appelait "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
118
Wardenclyffe

Voici du code. sans aucune erreur.

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

Cette solution vous permet de changer le nom du fichier téléchargé:

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

Vous pouvez utiliser canvas2image pour demander le téléchargement.

J'ai eu le même problème, voici un exemple simple qui à la fois ajoute l'image à la page et oblige le navigateur à la télécharger:

<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

Ce travail pour moi: (seulement 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

J'ai créé une petite bibliothèque qui fait cela (avec quelques autres conversions pratiques). Cela s'appelle reimg , et son utilisation est très simple.

ReImg.fromCanvas(yourCanvasElement).toPng()

7
gillyb

Semblable à réponse de 1000Bugy mais plus simple, car vous n'avez pas à créer d'ancre à la volée ni à envoyer un événement de clic manuellement (plus un IE correctif).

Si vous faites de votre bouton de téléchargement une ancre, vous pouvez le détourner avant que la fonctionnalité d'ancrage par défaut ne soit exécutée. Donc, onAnchorClick vous pouvez définir l'ancre href sur l'image base64 de la toile et l'attribut de téléchargement d'ancre sur le nom de votre image.

Cela ne fonctionne pas dans (le courant) IE car il n'implémente pas l'attribut download et empêche le téléchargement des données en uris. Mais cela peut être corrigé en utilisant window.navigator.msSaveBlob à la place.

Ainsi, votre gestionnaire d'événements de clic d'ancrage serait comme suit (où anchor, canvas et fileName sont des recherches de portée):

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

Voici n violon

5
Sjeiti

Vous pouvez essayer ceci; créer une ancre HTML factice et télécharger l'image à partir de là comme ...

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

Voici le violon

3
bmatovu

Au lieu de imageElement.src = myImage;, vous devez utiliser window.location = myImage;

Et même après cela, le navigateur affichera l'image elle-même. Vous pouvez cliquer avec le bouton droit de la souris et utiliser "Enregistrer le lien" pour télécharger l'image.

Vérifiez ce lien pour plus d'informations.

1
Hakan Serce