Tumblr 和 HTML5 - Square Grid 的画布？

Posted 2023-02-25

【中文标题】Tumblr 和 HTML5 - Square Grid 的画布？

【英文标题】：Tumblr and HTML5 - Canvas for Square Grid?

【发布时间】：2013-09-21 03:47:15

【问题描述】：

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

  <canvas id="myCanvas"  ></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 中，但我不确定要使代码正确显示照片需要进行哪些更改。

有什么想法可以解决这个问题吗？

【参考方案1】：

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

【讨论】：

非常感谢您的回答-非常感谢！如果重复代码是指我链接到的页面的 HTML，它是由 tumblr 根据您使用的主题的代码生成的。目前尝试弄清楚它是如何工作的完全是准系统。我接受了您的建议，并在代码中添加了一些内容，为每个画布创建了一个单独的 ID，但我没有得到任何修改后的照片。说实话，HTML5 对我来说是全新的，所以我还不太了解所有的来龙去脉。我在这里错过了一个完全明显的步骤吗？

您还需要唯一的 Image 对象（imageObj1、imageObj2 等）