2010-10-26 29 views
6

目前我正在編寫一個Web應用程序,該應用程序通過Static API - http://code.google.com/apis/maps/documentation/staticmaps/將來自Google Maps的圖像數據導入到HTML5畫布中。這意味着什麼以及它如何提供幫助?

不幸的是,由於跨域限制,我遇到了無法操縱Google Maps中的像素數據的問題。

不過,我一直在讀通過杜布先生鬧市區的荒野視頻(http://thewildernessdowntown.com),它採用了與谷歌地圖的畫布背後的人的一個這篇博客文章 - http://mrdoob.com/blog/post/705 - 它寫着:

「另一個挑戰是,您無法訪問從另一個域加載的圖像的像素數據......但是,雖然禁止像素訪問,但允許使用context.drawImage()從其他域上託管的圖像複製區域。 「

我覺得這可能是解決我的問題稍後在後它顯示的圖像的像素操作,但我不完全得到確切含義由「context.drawImage()被允許從託管在其他域上的圖像複製區域',如果有人能爲我澄清它,這將非常有幫助。

感謝,

DLiKS

編輯:這是我使用谷歌地圖的圖像畫在畫布上的代碼:

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來操縱這個嵌入式圖像在畫布上,我得到一個安全錯誤

+0

有趣的問題,+1。作爲一個附註,請注意Google的地圖是受版權保護的材料,所以您可以合法地對它們做些什麼限制。 – 2010-10-26 14:52:43

+0

'不幸的是,由於跨域限制,我遇到了無法操縱來自Google地圖的像素數據的問題。「您使用什麼代碼? – Harmen 2010-10-26 15:06:22

+0

我已將代碼作爲編輯添加到問題中。 – DLiKS 2010-10-26 15:18:25

回答

3

讀了文章,我想你誤解了Mr.doob說:

「[傑米]然後開始研究的其他方式繪製的地圖數據中一種可以產生相同效果的方式。「

他確實沒有像素處理,他使用context.drawImage

「...... 剪裁從原始圖像定位他們一前一後的水平。」

+3

這怎麼可能......真的!我只是想給出完全相同的答案,但你已經以驚人的13秒擊敗了我! – Harmen 2010-10-26 15:36:43

+1

因爲我是一個。 :) – galambalazs 2010-10-26 15:37:53

+0

啊,我明白了!感謝你的回答! – DLiKS 2010-10-26 15:39:36

-1

context.drawImage()我相信是一些操作HTML 5 Ca nvas。 看看這些網頁。

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

+0

heh。我通過發佈幾乎相同的答案中途。現在沒有意義了,所以我只是將我的體重增加到你的身上(因爲我今天的選票沒有用完,所以我不能+1) – Spudley 2010-10-26 15:12:57

+0

context.drawImage()只是將圖像放置在畫布上的標準方式。然而,僅僅在鏈接的例子中使用它,不允許基於像素的圖像操作遠程圖像(這是我想要實現的)。我試圖弄清楚的是,Doob先生如何通過巧妙地操縱這個功能來解決這個限制。儘管謝謝你的回答! – DLiKS 2010-10-26 15:16:52

+0

確實,這不是問題的答案。我嘗試使用'drawImage',但它給出了一個例外:'SECURITY_ERR:DOM Exception 18' – Harmen 2010-10-26 15:20:16

2

分配src使用一個aspx頁面圖像,以及aspx頁面將與您的文字到圖像作出反應。

例如:

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