javascript - getimagedata 在 Firefox 中不起作用

Question

我遇到了 HTML5 元素 getImageData() 的问题我在网站上使用 wScratchPad 作为草稿工具，并使用 wScratchPad 中的百分比函数来确定何时删除覆盖层。它在 IE9、Safari 和 Chrome 上运行良好。但它会在 Firefox 中引发安全错误。

我在 Chrome 和 IE9 中也遇到了同样的问题，但通过将 JS、图像和 HTML 移动到同一服务器来修复它。

我知道如果 JS 和 Canvas Image 的域不在同一域上，它会抛出错误，所以我检查了图像和 js 的 document.domain 。看起来像 JS 中的“document.domain = domain.com”，并且图像具有 document.domain = www.domain.com。

这可能是问题所在吗？如果是这样我该如何修复它？我已经看到了一种覆盖浏览器的方法，以获取用户确认脚本的警报，但鉴于这是一个高调的网站，这是不可能的。

在 wScratchPad 中导致错误的代码下面:

scratchPercentage: function($this)
{
    var hits = 0;
    var imageData = $this.ctx.getImageData(0,0,$this.canvas.width,$this.canvas.height)

    for(var i=0, ii=imageData.data.length; i<ii; i=i+4)
    {
        if(imageData.data[i] == 0 && imageData.data[i+1] == 0 && imageData.data[i+2] == 0 && imageData.data[i+3] == 0) hits++;
    }

    return (hits / $this.pixels) * 100;
},

Answer 1

是的，您的问题是页面和图像不是同源的。

修复此问题的方法是从 www.domain.com 加载页面，就像图像一样，或者让您的服务器随图像一起发送适当的 CORS header 。

我很惊讶你说它可以在其他浏览器中工作。您是否可能从 www.domain.com 加载页面？