Question

我正在尝试将HTML5添加到tumblr主题，以生成250px到250px的博客上发现的图像帖子，并使用它们代替普通的500px图像。我目前正在使用以下代码加载照片帖子中的图像：

  <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的最后一张照片，该照片将在第一张照片的位置加载到页面上，可以看到here。我做了一些研究，根据我的理解，问题出在imageObj.onload中，但我不确定需要哪些更改才能使代码正确显示照片。

我可以采取哪些措施来解决这个问题？

Answer 1

你的所有画布ID都是相同的，这是不可以的，并解释了为什么唯一绘制了它的画布是第一个。我不确定为什么你有这么多重复代码（多个脚本块除了图像url之外完全相同），但只要你确保每个画布在其相应的脚本块中都有一个唯一的id引用，以及独特的Image对象，它应该可以工作。

Tumblr和HTML5 - Square Grid的画布？

1 个答案: