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（）？

回答

相关问题