2010-12-04 3 views
2

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.datauri/image to canvas

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!

Répondre

4

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.

+0

Je l'ai fait et dit Uncaught TypeError: L'objet # n'a pas de méthode 'drawImage ' (fonction anonyme) – DavidT

+0

@DavidT: J'ai mis à jour la réponse pour clarifier que ** ctx ** est un contexte 2D et non un objet Canvas de premier niveau (d'où cette erreur). – kanaka

-1

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)

+0

Si cela est appelé plusieurs fois, vous voulez probablement juste rechercher le contexte 2D une fois en dehors de la fonction img.onload. – kanaka