context.getImageData() 操作不安全 [英] context.getImageData() operation is insecure

问题描述

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

I want to realize a simple greyscale filter for HTML5 canvas, but I canot grab the Image data as pixels. I get security warnings from FF and Chrome. Finally the filter does not make the image grey.

JS FIDLE 代码

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;
}

推荐答案

这是一项安全功能.来自 W3:

This is a security feature. From W3:

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

The getImageData(sx, sy, sw, sh) method must, if the canvas element's origin-clean flag is set to false, throw a SecurityError exception

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

This is to prevent malicious site owners from loading potentially private images that the user's browser has access to onto the canvas, then sending the data to their own servers. The origin-clean can be turned off if:

• 元素的 2D 上下文的 drawImage() 方法使用来源不同的 HTMLImageElement 或 HTMLVideoElement 调用与拥有画布元素的 Document 对象相同.

• The element's 2D context's drawImage() method is called with an HTMLImageElement or an HTMLVideoElement whose origin is not the same as that of the Document object that owns the canvas element.

元素的 2D 上下文的 drawImage() 方法使用一个 HTMLCanvasElement 调用，该元素的 origin-clean 标志为 false.

The element's 2D context's drawImage() method is called with an HTMLCanvasElement whose origin-clean flag is false.

元素的 2D 上下文的 fillStyle 属性设置为从 HTMLImageElement 创建的 CanvasPattern 对象或来源与文档不同的 HTMLVideoElement创建模式时拥有画布元素的对象.

The element's 2D context's fillStyle attribute is set to a CanvasPattern object that was created from an HTMLImageElement or an HTMLVideoElement whose origin was not the same as that of the Document object that owns the canvas element when the pattern was created.

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

The element's 2D context's fillStyle attribute is set to a CanvasPattern object that was created from an HTMLCanvasElement whose origin-clean flag was false when the pattern was created.

元素的 2D 上下文的 strokeStyle 属性设置为从 HTMLImageElement 创建的 CanvasPattern 对象或来源与文档不同的 HTMLVideoElement创建模式时拥有画布元素的对象.

The element's 2D context's strokeStyle attribute is set to a CanvasPattern object that was created from an HTMLImageElement or an HTMLVideoElement whose origin was not the same as that of the Document object that owns the canvas element when the pattern was created.

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

The element's 2D context's strokeStyle attribute is set to a CanvasPattern object that was created from an HTMLCanvasElement whose origin-clean flag was false when the pattern was created.

元素的 2D 上下文的 fillText() 或 strokeText() 方法被调用，最终使用的字体不是与拥有画布元素的 Document 对象相同.

The element's 2D context's fillText() or strokeText() methods are invoked and end up using a font that has an origin that is not the same as that of the Document object that owns the canvas element.

来源

这篇关于context.getImageData() 操作不安全的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！