0

HTML5 を tumblr テーマに追加して、ブログで見つかった画像投稿の 250 ピクセル x 250 ピクセルのトリミングを生成し、通常の 500 ピクセルの画像の代わりに使用しようとしています。現在、次のコードを使用して写真投稿内の画像をロードしています。

  <canvas id="myCanvas" width="250" height="250"></canvas>
  <script>
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  var imageObj = new Image();

  imageObj.onload = function() {
    // draw cropped image
    var sourceX = 150;
    var sourceY = 0;
    var sourceWidth = 250;
    var sourceHeight = 250;
    var destWidth = sourceWidth;
    var destHeight = sourceHeight;
    var destX = canvas.width / 2 - destWidth / 2;
    var destY = canvas.height / 2 - destHeight / 2;

    context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
  };
  imageObj.src = '{PhotoURL-500}';
  </script>

上記のコードを使用すると、最後の写真の 250x250 のトリミングがページに読み込まれ、最初の写真投稿の位置に表示されます。私はいくつかの調査を行いましたが、私が理解していることから、問題は imageObj.onload 内にありますが、コードが写真を適切に表示するためにどのような変更が必要かわかりません。

これを修正するために私ができることのアイデアはありますか?

4

1 に答える 1

0

すべてのキャンバス ID は同じです。これはノーノーであり、何かが描画されている唯一のキャンバスが最初のキャンバスである理由を説明しています。なぜそんなに多くの繰り返しコード (画像の URL を除いて完全に同一の複数のスクリプト ブロック) があるのか​​よくわかりませんが、各キャンバスに、対応するスクリプト ブロックで適切に参照される一意の ID があることを確認する限り、一意の Image オブジェクト、それは機能するはずです。

于 2013-09-21T05:59:52.687 に答える