Question

目前，我正在编写一个网络应用程序，通过静态API（{3}}）将图像数据从Google地图导入到HTML5画布中。

不幸的是，由于跨域限制，我遇到了无法操纵Google地图的像素数据的问题。

然而，我一直在阅读Doob先生的博客文章，他是Wilderness Downtown视频背后的人之一（http://code.google.com/apis/maps/documentation/staticmaps/），该视频采用了Google地图的画布 - http://thewildernessdowntown.com - 并且：

“另外一个挑战是你无法访问从另一个域加载的图像的像素数据......但是，虽然禁止像素访问，但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); 
}

图像显示OK但是当我尝试使用getImageData在画布上操作此嵌入图像时，出现安全错误

Answer 1

读完这篇文章之后，我认为你误解了Mr.doob所说的话：

“[杰米]然后开始研究绘制地图数据的其他方式，以产生相同的效果。”

他没有像素操作，他使用context.drawImage作为

来自原始图片的
“... 裁剪列，并且水平地一个接一个地定位。”

Answer 2

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

例如：

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

Answer 3

context.drawImage()我认为是操纵HTML 5 Canvas的某种方式。看看这些网页。

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

这意味着什么以及它如何帮助？

3 个答案: