本地主机上的 context.getImageData()？答案

【问题标题】：context.getImageData() on localhost?本地主机上的 context.getImageData()？
【发布时间】：2012-01-31 02:17:48
【问题描述】：

我有以下 sn-p 代码，我正在尝试从 localhost（OSX，运行 XAMPP）运行它：

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

我在这里发现了一些类似的问题，我知道这与我在本地工作的事实有关，如果我尝试从同一域访问图像，则不会发生这种情况。我不知道这是否有意义，但这是我理解的。

我的问题是，如何在本地开发环境中进行这项工作？

【问题讨论】：

标签： html canvas

【解决方案1】：

我最终使用了一系列解决方案（请参阅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;
});

我知道这个解决方案不是最优的，但它对我有用并且当图像不是来自同一来源时它会有所帮助。

我为遇到相同问题的任何人发布此信息。

【讨论】：

【解决方案2】：

使用 HTTP 服务器提供您的 html，例如 Apache 或 Nginx。

Mac OSX 自带 Python，因此您只需打开终端即可启动 HTTP 服务器，然后输入：

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

然后在浏览器中打开http://localhost:8000/。这应该可以。

【讨论】：

并不总是可能的。在我们将站点放在 CD 上以通过 Autorun.inf 在目标计算机上本地运行的情况下，如何解决此问题，因此无法设置服务器或依赖服务器（或任何网络访问） ) 可用吗？在所有其他浏览器中都具有魅力，但在 Chrome 控制台中显示：“动态警告：无法获取数据 URL。无法在 'HTMLCanvasElement' 上执行 'toDataURL'：可能无法导出受污染的画布。” 悲伤的时光

【解决方案3】：

尝试其他浏览器可能会有所帮助。我在 Chromium 上发生了这种情况，只需切换到 Firefox，我就能够继续在本地调试。

【讨论】：