Tumblr和HTML5 - 正方形網格畫布？

我正在嘗試將HTML5添加到tumblr主題中，以便在博客中找到250像素x 250像素的作物並使用它們代替正常的500像素圖像。我目前使用下面的代碼到照片帖子中加載圖片：Tumblr和HTML5 - 正方形網格畫布？

<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，但我不確定需要進行哪些更改才能使代碼正確顯示照片。

任何想法，我可以做些什麼來解決這個問題？

來源

2013-09-21 masonlong

所有的畫布編號都是相同的，這是一個不是的，並解釋了爲什麼唯一畫有任何東西的畫布是第一個。我不確定爲什麼你有這麼多的重複代碼（多個腳本塊，除了圖像url之外完全相同），但只要確保每個畫布在其相應的腳本塊中都有適當的引用，並且獨特的圖像對象，它應該工作。

來源

2013-09-21 05:59:52

非常感謝您的回答 - 我真的很感激！如果通過重複代碼來表示我鏈接的頁面的HTML，那麼它會根據您使用的主題代碼由tumblr生成。現在完全是準系統，試圖弄清楚它是如何工作的。我採納了您的建議並在代碼中添加了一些內容，以便爲每個畫布創建一個單獨的ID，但我根本沒有獲取任何修改後的照片。說實話，HTML5對我來說是全新的，所以我還沒有完全理解所有的細節。我錯過了一個完全明顯的步驟嗎？ – masonlong

您將需要獨特的圖像對象（imageObj1，imageObj2等） –

Tumblr和HTML5 - 正方形網格畫布？

回答

相關問題