16

我想为 HTML5 画布实现一个简单的灰度过滤器，但我无法将图像数据作为像素抓取。我收到来自 FF 和 Chrome 的安全警告。最后，过滤器不会使图像变灰。

JS 文件代码

js：

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

var image = new Image();
image.onload = function () {
  if (image.width != canvas.width)
    canvas.width = image.width;
  if (image.height != canvas.height)
    canvas.height = image.height;
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.drawImage(image, 0, 0, canvas.width, canvas.height);
  var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
  filter(imageData);
  context.putImageData(imageData, 0, 0);
}
image.src = "http://i0.gmx.net/images/302/17520302,pd=2,h=192,mxh=600,mxw=800,w=300.jpg";

function filter(imageData){
 var d = imageData.data;
   for (var i = 0; i < d.length; i += 4) {
     var r = d[i];
     var g = d[i + 1];
     var b = d[i + 2];
     d[i] = d[i + 1] = d[i + 2] = (r+g+b)/3;
   }
return imageData;
}
4

2 回答 2

11

这是一项安全功能。从W3开始：

getImageData(sx, sy, sw, sh)如果 canvas 元素的 origin-clean 标志设置为 false，该方法必须抛出SecurityError异常

这是为了防止恶意网站所有者将用户浏览器可以访问的潜在私有图像加载到画布上，然后将数据发送到他们自己的服务器。如果出现以下情况，可以关闭 origin-clean：

  • 元素的 2D 上下文的 drawImage() 方法使用 HTMLImageElement 或 HTMLVideoElement 调用，其来源与拥有 canvas 元素的 Document 对象的来源不同。

  • 元素的 2D 上下文的 drawImage() 方法是使用其 origin-clean 标志为 false 的 HTMLCanvasElement 调用的。

  • 元素的 2D 上下文的 fillStyle 属性设置为 CanvasPattern 对象，该对象是从 HTMLImageElement 或 HTMLVideoElement 创建的，其来源与创建模式时拥有 canvas 元素的 Document 对象的来源不同。

  • 元素的 2D 上下文的 fillStyle 属性设置为从 HTMLCanvasElement 创建的 CanvasPattern 对象，该 HTMLCanvasElement 在创建模式时其 origin-clean 标志为 false。

  • 元素的 2D 上下文的 strokeStyle 属性设置为 CanvasPattern 对象，该对象是从 HTMLImageElement 或 HTMLVideoElement 创建的，其来源与创建模式时拥有 canvas 元素的 Document 对象的来源不同。

  • 元素的 2D 上下文的 strokeStyle 属性设置为 CanvasPattern 对象，该对象是从创建模式时其 origin-clean 标志为 false 的 HTMLCanvasElement 创建的。

  • 元素的 2D 上下文的 fillText() 或 strokeText() 方法被调用并最终使用与拥有 canvas 元素的 Document 对象的来源不同的字体。

资源

于 2013-06-11T01:12:11.837 回答
10

这是一个真正解决问题的答案：

创建新图像后，使用

image.crossOrigin = "anonymous";
于 2018-04-24T12:50:32.873 回答