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

Question

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

Demandé el 20 de Mai, 2012: Quand la question a-t-elle été
55922 affichage: Nombre de visites la question a
4 Réponses: Nombre de réponses aux questions
Ouvert: Situation réelle de la question

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-il m'aider, s'il vous plaît?

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>

Merci, Wardenclyffe

Demandé el 20 de Mai, 2012 par Wardenclyffe

Answer 1

4 Réponses

Answer 2

174voto

user1874941 Points 794

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

Répondu el 28 de Mars, 2013 par user1874941 (794 Points )

Answer 3

25voto

SColvin Points 570

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://www.nihilogic.dk/labs/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>

Répondu el 20 de Mai, 2012 par SColvin (570 Points )

Answer 4

1voto

Hakan Serce Points 6705

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

Et même après que le navigateur affiche l'image elle-même. Vous pouvez faire un clic droit et d'utilisation "Enregistrer le Lien" pour le téléchargement de l'image.

Vérifier ce lien pour plus d'informations.

Répondu el 20 de Mai, 2012 par Hakan Serce (6705 Points )

Answer 5

-8voto

Vinay Chandra Points 19

@Wardenclyffe et SColvin , vous essayez d'enregistrer l'image à l'aide de la toile, non pas à l'aide de toile'context. vous devriez essayer de ctx.toDataURL();

Essayez Ceci :

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

Aussi vous pouvez vous référer aux liens suivants:

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

Répondu el 21 de Février, 2013 par Vinay Chandra (19 Points )

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

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

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

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: