5

次のコードを使用してキャンバスを描画し、toDataUrl を使用して png 画像として保存しています。

<!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>

しかし、私のpng画像は空白の画像として表示されます。真っ白な画像しか見えません。これを検索しましたが、これについては何も見つかりませんでした。私はphpとchromeブラウザを使用しています。ここで何が問題なのですか？

4

1 に答える 1

3

最初に を呼び出し、その呼び出しloadImagesの直後にデータ URL を取得します。ただし、実装が示すように、それを呼び出しても読み込みプロセスが開始されるだけです。コールバックは、すべての画像がロードされたときに呼び出されます。これは、将来のある時点です。loadImages loadImages

現在、画像がまだ読み込まれていないため、空の画像が表示されます。そのため、コールバックはまだ呼び出されておらず、その結果、キャンバスはまだ空です。

要するに、ロードされているイメージに依存するすべてのもの (期待されるtoDataURL結果など) は、それらのイメージが実際にロードされたときに実行する必要があります。したがって、コールバックで実行されます。

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;
});
于 2012-08-17T11:44:30.823 に答える