將畫布對象保存到圖像中時出現安全錯誤

不完全。如果我只畫（ex lines，rect ...）並嘗試將畫布導出爲圖像。它工作正常。但是，如果我使用在畫布上放置圖像的canvas.drawImage(...)函數。然後嘗試將其導出爲圖像，我得到以下安全錯誤：將畫布對象保存到圖像中時出現安全錯誤

[16:05:05.326] uncaught exception: [Exception... "Security error" code: "1000" nsresult: 
"0x805303e8 (NS_ERROR_DOM_SECURITY_ERR)" location: 
"http://127.0.0.1:8020/Blackboard/Models/BlackboardCanvas.js Line: 82"]

我假設canvas.drawImage將採取原始像素的圖像，並將其粘貼到畫布上，但我想我錯了。我能做什麼？

來源

2011-11-14 dchhetri

你能給出導致問題的部分代碼嗎？ – epascarello

圖像來自哪裏？如果您將'.drawImage'與跨域圖片一起使用，那麼您將無法使用'.getImageData'或'.toDataURL'。 – pimvdb

是的，我認爲這是問題，跨域圖像。任何方式在這個？ – dchhetri

您描述的行爲是根據the specification。摘錄：從同一個域

All canvas elements must start with their origin-clean set to true. The flag must be set to false if any of the following actions occur:

The element's 2D context's drawImage() method is called with an HTMLImageElement or an HTMLVideoElement whose origin is not the same as that of the Document object that owns the canvas element.

[...]

Whenever the toDataURL() method of a canvas element whose origin-clean flag is set to false is called, the method must throw a SecurityError exception.

來規避這個問題的唯一辦法是使用服務器端的技術爲您和獲取遠程圖像重新爲它服務。

來源

2011-11-15 02:56:24 Phrogz

如何使用某種外部庫來讀取圖像的像素，然後將每個像素放在畫布上。你知道任何這樣的圖書館嗎？ – dchhetri

@ user814628「外部圖書館」是什麼意思？比如Flash？這聽起來像你試圖做一些邪惡的東西（對用戶不好，可能是非法的）。你爲什麼試圖從瀏覽器的另一個域加載圖像然後捕獲它？ – Phrogz

對不起，我不是故意要惡毒。我只是在做一個高級設計項目。通過外部庫，我的意思是可能使用外部JavaScript庫。也許從用戶那裏得到一個圖像鏈接並讀取圖像中的像素並將其存儲到畫布上。只要看看這是否有可能。 – dchhetri

您在致電canvas.drawImage之前是否在等待圖像完全加載？

var img = new Image(); 
img.onload = function(){ 
    canvas.drawImage(img,0,0); 
    //do whatever else here 
}; 
img.src = 'foo.jpg';

來源

2011-11-14 21:15:04 epascarello

是的，正如評論中提到的，我認爲問題在於跨域圖像。我怎樣才能繞過這個問題？ – dchhetri

將畫布對象保存到圖像中時出現安全錯誤

回答

相關問題