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 回答