datauri/image to canvas

Question

Comment convertir une image ou des données en canvas? Je vois l'autre voie au http://www.nihilogic.dk/labs/canvas2image/, mais je veux aussi savoir comment je peux créer une toile à la première place.

La raison pour laquelle je pose cette question est parce que je voudrais créer une petite application qui permet à l'utilisateur de créer une image de toile, l'enregistrer comme quelque chose et être capable de rouvrir pour la modification de toile dans le futur. J'ai pensé que datauri est un bon moyen de sauvegarder une toile, mais je ne sais pas comment faire pour rouvrir les datauri et utiliser canvas pour modifier le dessin.

Merci!

Answer 1

Créer un élément d'image en utilisant les données URI de données comme source et puis utilisez drawImage pour dessiner sur la toile:

var ctx = document.getElementById('ctx').getContext('2d'); 
var img = new Image(); 
img.src = uriData; 
img.onload = function() { 
    ctx.drawImage(img,0,0); 
} 

Mise à jour: pour préciser que CTX est un contexte 2D, et non une toile objet.

Answer 2

J'obtenu cela fonctionne:

var img = new Image(); 
var uriData = "...."; // replace with dataUri 

img.onload = function() { 
    var ctx = document.getElementById('ctx').getContext('2d'); 
    ctx.drawImage(img,0,0); 
} 

img.src = uriData; 

On dirait que l'astuce est que l'élément Canvas a besoin de sa largeur et la hauteur spécifiée. Quand je ne spécifie pas les dimensions, cela devient arbitraire et ne montre qu'une partie de ma grande image (de dataUri)