DLi*_*iKS 6 javascript html5 canvas
目前,我正在编写一个Web应用程序,该应用程序通过静态API(http://code.google.com/apis/maps/documentation/staticmaps/)将图像数据从Google地图导入到HTML5画布中.
不幸的是,由于跨域限制,我遇到了无法操纵Google地图中的像素数据的问题.
但是,我一直在阅读Doob先生的博客文章,他是Wilderness Downtown视频背后的人之一(http://thewildernessdowntown.com),该视频采用了Google地图的画布 - http://mrdoob.com/blog/发表/ 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);
}
Run Code Online (Sandbox Code Playgroud)
图像显示OK,但是当我尝试使用getImageData在画布上操作此嵌入图像时,出现安全错误
读完这篇文章后,我认为您误解了杜布先生所说的话:
“[Jamie] 然后开始研究其他绘制地图数据的方法,以产生相同的效果。”
他不进行像素操作,他context.drawImage用于
“......从原始图像中裁剪列并将它们水平放置在一个接一个的位置。”
| 归档时间: |
|
| 查看次数: |
308 次 |
| 最近记录: |