Question

我想为HTML5画布实现一个简单的灰度过滤器，但我可以将Image数据作为像素抓取。我从FF和Chrome获得安全警告。最后，滤镜不会使图像变灰。

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

Answer 1

这是一项安全功能。来自W3：

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

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

使用HTMLImageElement或HTMLVideoElement调用元素的2D上下文的drawImage（）方法，其原点不相同   与拥有canvas元素的Document对象一样。



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



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



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



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



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



调用元素的2D上下文的fillText（）或strokeText（）方法，并使用原点不是的字体结束   与拥有canvas元素的Document对象相同。



Source

Answer 2

这是一个实际解决问题的答案：

创建新图像后，使用

<select class="form-control glyphicon" required>
    <option value="empty"></option>
    <option *ngFor="let car of cars" value="true">&#xe043; {{car.name}}</option>
</select>

context.getImageData（）操作不安全

2 个答案: