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 - 正方形网格画布？

回答

相关问题