web-dev-qa-db-fra.com

HTML5 Canvas: Obtenez l'événement lorsque le dessin est terminé

Je dessine une image sur un élément de toile. J'ai ensuite du code qui dépend de ce processus pour être terminé. Mon code ressemble à ceci:

var myContext = myCanvasElement.getContext('2d'),
    myImg = new Image();

myImg.onload = function() {
    myContext.drawImage(containerImg, 0, 0, 300, 300);
};

myImg.src = "someImage.png";

Alors maintenant, je voudrais être averti lorsque drawImage est terminé. J'ai vérifié la spécification mais je n'ai trouvé ni événement ni possibilité de passer une fonction de rappel. Jusqu'à présent, je viens de définir un délai d'attente, mais ce n'est évidemment pas très durable. Comment résolvez-vous ce problème?

javascriptcanvashtml5-canvasdom-eventsdrawimage
23
elHornair

Comme presque toutes les fonctions Javascript, drawImage est synchrone, c'est-à-dire qu'il ne reviendra qu'une fois qu'il aura réellement fait ce qu'il est censé faire.

Cela dit, ce que c'est censé faire, comme la plupart des autres appels DOM, est une liste de choses à mettre en file d'attente la prochaine fois que le navigateur entrera dans la boucle d'événements.

Il n'y a aucun événement que vous pouvez spécifiquement enregistrer pour vous dire quand c'est le cas, car au moment où un tel gestionnaire d'événements pourrait être appelé, le repeindre aurait déjà eu lieu.

19
Alnitak

Jef Claes l'explique assez bien sur son site Internet :

Les navigateurs chargent les images de manière asynchrone alors que les scripts sont déjà interprétés et exécutés. Si l'image n'est pas entièrement chargée, le canevas ne parvient pas à la restituer.

Heureusement, ce n'est pas difficile à résoudre. Il suffit d'attendre pour commencer à dessiner jusqu'à ce que nous recevions un rappel de l'image, indiquant que le chargement est terminé.

<script type="text/javascript">        
window.addEventListener("load", draw, true);

function draw(){                                    
    var img = new Image();
    img.src = "http://3.bp.blogspot.com/_0sKGHtXHSes/TPt5KD-xQDI/AAAAAAAAA0s/udx3iWAzUeo/s1600/aspnethomepageplusdevtools.PNG";                
    img.onload = function(){
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');    

        context.drawImage(img, 0, 0);        
    };            
}
7
Elisha Mooring

Vous avez déjà un événement lorsque l'image se charge et vous faites une chose (dessiner). Pourquoi ne pas en faire un autre et appeler la fonction qui fera ce que vous voulez faire après drawImage? Littéralement juste:

myImg.onload = function() {
    myContext.drawImage(containerImg, 0, 0, 300, 300);
    notify(); // guaranteed to be called after drawImage
};
4
Simon Sarris