Enregistrer le contenu en toile HTML5, y compris traînés-sur les images

Question

J'utilise une toile pour charger une image d'arrière-plan, puis, en utilisant jQuery UI, j'appelle la fonction largable() sur la toile et draggable() sur un tas de Images PNG sur l'écran (qui ne sont pas dans la toile). Après l'utilisateur fait glisser une ou plusieurs images sur la toile, je lui permets de sauvegarder le contenu dans un fichier en utilisant la fonction suivante:

function saveCanvas() { 
    var data = canvas.toDataURL("image/png"); 
    if (!window.open(data)) { 
     document.location.href = data; 
    } 
} 

Cette ouverture avec succès une autre fenêtre avec une image, qui contient malheureusement que l'arrière-plan d'origine image, pas les images traînées. Je voudrais enregistrer une image présentant la dernière étape de la toile. Qu'est-ce que j'oublie ici?

Merci pour votre temps.

Answer 1

Vous devez dessiner les images sur la toile.

Voici un exemple vivant:

http://jsfiddle.net/6YV88/244/

Pour l'essayer, faites glisser le chaton et le laisser tomber quelque part sur la toile (ce qui est la place au-dessus du chaton). Puis déplacez à nouveau le chaton pour voir qu'il a été dessiné dans la toile.

L'exemple est juste pour montrer comment une image serait tirée dans la toile. Dans votre application, vous n'utilisez pas la méthode draggablestop. Au contraire, au moment de la sauvegarde, vous passeriez en revue le pngs, en les dessinant sur votre toile. Notez que la méthode jQuery offset() est utilisée pour déterminer les positions du canevas et des images relatives au document.

Answer 2

Vous êtes sauver l'état final de la toile. Vous avez des images sur la toile et la toile n'a aucune connaissance d'eux. La seule façon de sauvegarder le résultat obtenu est de, avant d'appeler toDataUrl, d'appeler le ctx.drawImage avec chacune des images et de les dessiner sur le canevas.

Obtenir le droit coordonnées pour l'appel à drawImage pourrait se compliquer, mais ce ne est pas impossible. Vous devrez probablement utiliser les coordonnées pageX et pageY de l'image, puis les dessiner sur le canevas par rapport aux propres pagesX et pageY du canevas.