html5 canvas toDataURL renvoie l'image vierge

je suis à l'aide de code suivant pour dessiner la toile et de les enregistrer comme image png à l'aide de toDataUrl.

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #myCanvas {
        border: 1px solid #9C9898;
      }
    </style>
    <script>
      function loadImages(sources, callback) {
        var images = {};
        var loadedImages = 0;
        var numImages = 0;
        //get num of sources
        for(var src in sources) {
          numImages++;
        }
        for(var src in sources) {
          images[src] = new Image();
          images[src].onload = function() {
            if(++loadedImages >= numImages) {
              callback(images);
            }
          };
          images[src].src = sources[src];
        }
      }

      window.onload = function(images) {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");

        var sources = {
          darthVader: "http://a1.sphotos.ak.fbcdn.net/hphotos-ak-snc6/228564_449431448422343_1996991887_n.jpg",
          yoda: "http://a4.sphotos.ak.fbcdn.net/hphotos-ak-snc7/427489_449423165089838_503188418_n.jpg"
        };

        loadImages(sources, function(images) {
          context.drawImage(images.darthVader, 250, 30, 250, 250);
          context.drawImage(images.yoda, 530, 30, 250, 250);
        });


//save canvas image as data url (png format by default)
        var dataURL = canvas.toDataURL();

        //set canvasImg image src to dataURL
        //so it can be saved as an image
        document.getElementById("canvasImg").src = dataURL;
};


    </script>
  </head>
  <body>
    <canvas id="myCanvas" width="850" height="315"></canvas>
<img id="canvasImg" alt="Right click to save me!">
  </body>
</html>

Mais mon image png est montré comme image vide. je ne vois que des pages blanches de l'image.
j'ai cherché mais rien trouvé sur ce.
je suis à l'aide de php et le navigateur chrome.
quel est le problème ici?

Double Possible de HTML5 Canvas toDataURL retourne blanc

OriginalL'auteur Badal | 2012-08-17

  1. 2

    Vous êtes le premier appel loadImages, puis l'obtention de données d'URL à droite après que loadImages appel. Cependant, comme votre loadImages mise en œuvre montre, en l'appelant simplement démarre le processus de chargement; le callback est appelé lorsque toutes les images ont été chargés, qui est un certain temps dans l'avenir.

    Actuellement, vous obtenez une image vide, car les images n'ont pas encore été chargé, de sorte que votre fonction de rappel est appelée pas encore, et comme un résultat de votre toile est toujours vide.

    En bref, tout ce qui s'appuie sur les images ayant en cours de chargement (par exemple, votre toDataURL résultat) doivent être réalisées lorsque les images sont réellement chargés - ainsi, dans la fonction de rappel.

    loadImages(sources, function(images) {
  context.drawImage(images.darthVader, 250, 30, 250, 250);
  context.drawImage(images.yoda, 530, 30, 250, 250);

  var dataURL = canvas.toDataURL();
  document.getElementById("canvasImg").src = dataURL;
});
    il ne se passe rien quand j'ai ajouter ceci dans le rappel. même pas la src est fixé à DataURL
    Surana: les images Sont peintes sur la toile? Toute erreur dans la console?
    Il y a une erreur dans la console. Vous êtes le dessin des images provenant d'autres sites, et par mesure de sécurité, vous ne pouvez pas obtenir les données de l'URL. Vous pourriez héberger les images sur votre propre nom de domaine à la place.
    ok obtenu grâce

    OriginalL'auteur pimvdb