Tumblr和HTML5-方格的畫布？

Question

我正在嘗試將HTML5添加到tumblr主題中，以生成在博客上找到的圖片帖子的250px x 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裁剪圖，該圖片將被加載到頁面上第一張照片發布的位置，可以在此處看到。 我已經進行了一些研究，據我了解，問題出在imageObj.onload之內，但我不確定為使代碼正確顯示照片需要進行哪些更改。

關於該如何解決的任何想法？

Answer 1

您所有的畫布ID都是相同的，這是一個否定的原因，並解釋了為什么唯一帶有任何內容的畫布是第一個。 我不太確定為什么會有這么多的重復代碼（除了圖像URL之外，多個腳本塊完全相同），但是只要您確保每個畫布在其相應的腳本塊以及唯一的Image對象，它應該可以工作。