嵌入外部圖像以在HTML畫布中使用？

我正在使用JavaScript將圖像加載到Firefox中的Canvas元素中。這適用於本地圖像，但會爲外部圖像引發安全性異常。有沒有辦法避免這種安全異常，一個不涉及我的服務器必須作爲代理來本地加載圖像（因爲這會給我的服務器帶來壓力）？嵌入外部圖像以在HTML畫布中使用？

PS：目前的代碼與此類似：

var img = new Image(); 
var contextSource = canvasSource.getContext('2d'); 
contextSource.drawImage(img, 0, 0); 
// get image data to do stuff with pixels 
var imageDataSource = contextSource.getImageData(0, 0, width - 1, height - 1);

來源

2010-04-14 Philipp Lenssen

我不認爲這是可能的，因爲這會打開瀏覽器跨域攻擊。

來源

2010-04-14 09:26:19

我在我的博客文章中顯示它可能是 – 2011-05-01 11:19:25

哦哦。我以爲你做了回答。在今年應該看起來更好 – 2011-05-01 11:59:23

實際上，通過利用XHR等級2和UrlData可能也是如此。檢查出my blog post。

來源

2011-03-13 06:21:49

事實上，你表現出真的有可能從其他領域獲得圖像。 – 2011-05-02 12:30:42

斯坦尼斯拉夫的方法雖然簡潔，但依賴於跨源資源共享。如果您可以使用CORS訪問控制允許來源來允許您的域名，則您擁有該域名，並且它可能不是「外部」服務器。 – 2011-09-07 06:06:53

可以是具有不同域/子域的相同服務器。老實說，我正在尋找一種方式來從CDN爲html5遊戲/應用帶來圖片。 – 2011-09-07 12:18:52

這適用於25.6k以下的圖像。使用YQL的數據：uri轉換器來獲取圖像並將您的base-64編碼塊返回。然後在客戶端創建一個圖像，並將其源設置爲您從YQL收到的數據。例如這裏：

http://kentbrewster.com/avatar-portraits

這裏是向右YQL data table的鏈接。

[編輯修復;它是25.6k，而不是256]

來源

2011-09-06 03:51:58

您確定不小於25K，不是256K？ – jmoreno 2011-12-31 00:36:37

哎呀，對不起！固定！ – 2012-01-05 19:23:17

我其實希望我錯了...... – jmoreno 2012-01-05 21:02:14

嵌入外部圖像以在HTML畫布中使用？

回答

相關問題