localhost上的context.getImageData（）？

我有下面的代碼片段，我試圖從本地主機運行它（OSX，運行XAMPP）：localhost上的context.getImageData（）？

var canvas = document.getElementById('mycanvas'); 
    var cx = canvas.getContext('2d'); 

    var myImg = new Image(); 
    myImg.src = 'images/lion.jpg'; 

    $(myImg).load(function() { 
     cx.drawImage(myImg, 0, 0); 
     var imgData = cx.getImageData(0,0,150,150); 
    });

但是當我運行它，我得到從控制檯此錯誤：

Unable to get image data from canvas because the canvas has been tainted by cross-origin data. 
site.js:11Uncaught Error: SECURITY_ERR: DOM Exception 18

我在這裏發現了一些類似的問題，我知道這與我在本地工作的事實有關，如果我試圖從同一個域訪問該映像，則不會發生這種情況。我不知道這是否合理，但這是我的理解。

我的問題是，我該如何在本地開發環境中完成這項工作？

來源

2011-12-31 Nikolay Dyankov

用HTTP服務器爲您的html服務，例如Apache或Nginx。

的Mac OSX自帶安裝Python，所以你可以簡單地通過打開終端啓動一個HTTP服務器，然後輸入：

cd /path/to/my/work/ 
python -m SimpleHTTPServer

然後在你的瀏覽器中打開http://localhost:8000/。這應該工作。

來源

2011-12-31 14:27:15 clowwindy

工作就像一個魅力，謝謝一堆！ – 2011-12-31 14:37:41

並非總是可行。在我們將CD上的站點通過Autorun.inf在目標機器上本地運行的情況下，如何解決這個問題，因此無法設置服務器或依賴於一個（或任何網絡訪問）可用？工程在所有其他瀏覽器，但在Chrome控制檯魅力說：「動力學警告：無法獲取數據URL無法執行‘toDataURL’上‘HTMLCanvasElement’：。被污染的畫布不得出口」傷心 – 2014-01-16 01:39:06

環回（127.0.0.1）網絡始終可用。 – clowwindy 2014-03-29 10:24:31

嘗試不同的瀏覽器可能會有所幫助。 Chromium發生了這種情況，只需切換到Firefox，我就可以繼續在本地進行調試。

來源

2012-08-27 18:39:16 broncoAbierto

我結束了使用的解決方案組合（見this other problem）

步驟：

圖像變換爲base64字符串。
將其指定爲Image js對象的src。
在畫布上繪製

代碼：

// helper to transform to base64 
// see other question for more help 
function toDataUrl(url, callback) { 
    var xhr = new XMLHttpRequest(); 
    xhr.responseType = 'blob'; 
    xhr.onload = function() { 
    var reader = new FileReader(); 
    reader.onloadend = function() { 
     callback(reader.result); 
    }; 
    reader.readAsDataURL(xhr.response); 
    }; 
    xhr.open('GET', url); 
    xhr.send(); 
} 

var canvas  = document.querySelector("canvas"); 
var ctx   = canvas.getContext("2d"); 
var png   = new Image(); 
var backgroundSrc = "....."; 

png.onload = function() { 
    ctx.drawImage(png, 0, 0); 
}; 

toDataUrl(backgroundSrc, function(base64Img) { 
    png.src = base64Img; 
});

我知道這個解決方案不是最優的，但它爲我工作它有助於當圖像不會從同一來源來。

我發佈此任何人遇到同樣的問題。

來源

2016-12-07 22:16:30 camou

localhost上的context.getImageData（）？

回答

相關問題