这是什么意思，它如何帮助？

Question

目前我正在编写一个网络应用程序，通过静态API从谷歌地图导入图像数据http://code.google.com/apis/maps/documentation/staticmaps/到HTML5画布中。不幸的是，由于跨域限制，我无法操作来自谷歌地图的像素数据。然而，我一直在阅读Mr. Doob的博客文章，他是Wilderness Downtown视频背后的人之一(http://thewildernessdowntown.com)，其中使用了带有谷歌地图的画布http://mrdoob.com/blog/post/705，它说道：“另一个挑战是，您无法访问从其他域加载的图像的像素数据......但是，尽管像素访问被禁止，context.drawImage()允许从托管在其他域上的图像复制区域。”

我认为这可能是解决我的问题的方法，因为在文章的后面它展示了图像的像素操作，但我不太明白'context.drawImage()允许从托管在其他域上的图像中复制区域'到底意味着什么，如果有人能为我澄清一下，那将非常有帮助。

谢谢，

DLiKS

编辑：这是我用来将Google地图图像绘制到画布上的代码：

var ctx = document.getElementById('canvas').getContext('2d'); 
var img = new Image(); 
img.src = 'LINK TO GOOGLE MAPS IMAGE'; 
img.onload = function(){ 
ctx.drawImage(img,0,0); 
}

图像显示正常，但当我尝试使用getImageData在画布上操作这个嵌入式图像时，出现安全错误。

- DLiKS

---

有趣的问题，+1。顺便提一下，请注意谷歌地图受版权保护，因此在法律上您可以做的事情是有限制的。 - Pekka

很不幸，由于跨域限制，我无法操作来自Google Maps的像素数据。您使用什么代码？ - Harmen

我已将代码作为编辑添加到问题中。 - DLiKS

好问题，我也不明白。我试图将一个画布元素的图像数据复制到另一个画布上，但是操作第二个画布也会出现安全错误。 - Harmen

Answer 1

阅读了这篇文章后，我认为您误解了Mr.doob的话：

“[Jamie] 接着开始研究其他绘制地图数据的方式，以创造相同的效果。”

他没有进行像素操作，而是使用 context.drawImage 来进行裁剪原始图像的列并将它们水平排列。

- gblazex

---

这怎么可能！真的！我刚想给出完全相同的答案，但你在不可思议的13秒内击败了我！ - Harmen

Answer 2

使用一个aspx页面为图像分配src，该aspx页面将以您的文本响应该图像。

例如：

image.src="CreateImage.aspx";
image.onload = function () {
    ctx.drawImage(image,5,5,width,height);
}

- Sobha

Answer 3

context.drawImage() 我相信是一种操纵 HTML 5 画布的方式。 请看这些网页。

http://dev.opera.com/articles/view/html-5-canvas-the-basics/
http://diveintohtml5.ep.io/canvas.html

- Ranhiru Jude Cooray

---

呵呵，我已经快要发布一个几乎相同的答案了。现在没必要了，所以我会支持你的观点（不能+1，因为我今天的投票次数已经用完了）。 - Spudley

context.drawImage()是将图像放置在画布上的标准方法。然而，仅仅像链接示例中那样使用它并不允许对远程图像进行基于像素的图像操作（这正是我想要实现的）。我正在努力弄清楚Mr. Doob是如何通过对此函数进行巧妙的操作来绕过这个限制的。感谢您的回答！ - DLiKS

确实，这不是问题的答案。我尝试使用drawImage但它会抛出一个异常：SECURITY_ERR: DOM Exception 18。 - Harmen