dai*_*isy 9 firefox html5 canvas filter
我想为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;
}
sta*_*ers 10
这是一个真正解决问题的答案：
创建新图像后，使用
image.crossOrigin = "anonymous";
这是一项安全功能。从W3出发：
getImageData(sx, sy, sw, sh)如果canvas元素的origin-clean标志设置为false，则该方法必须引发SecurityError异常
这是为了防止恶意站点所有者将用户浏览器可以访问的潜在私有图像加载到画布上，然后将数据发送到其自己的服务器。在以下情况下，可以关闭原始清洁：
元素的2D上下文的drawImage（）方法用HTMLImageElement或HTMLVideoElement调用，它们的来源与拥有canvas元素的Document对象的来源不同。
用HTMLCanvasElement调用元素的2D上下文的drawImage（）方法，其原始清除标志为false。
元素的2D上下文的fillStyle属性设置为CanvasPattern对象，该对象是从HTMLImageElement或HTMLVideoElement创建的，其来源与创建图案时拥有画布元素的Document对象的来源不同。
元素的2D上下文的fillStyle属性设置为CanvasPattern对象，该对象是从HTMLCanvasElement创建的，该HTMLCanvasElement在创建模式时其origin-clean标志为false。
元素的2D上下文的strokeStyle属性设置为CanvasPattern对象，该对象是从HTMLImageElement或HTMLVideoElement创建的，其来源与创建模式时拥有画布元素的Document对象的来源不同。
元素的2D上下文的strokeStyle属性设置为CanvasPattern对象，该对象是从HTMLCanvasElement创建的，该HTMLCanvasElement在创建模式时其origin-clean标志为false。
调用该元素的2D上下文的fillText（）或strokeText（）方法，并最终使用一种字体，该字体的起源与拥有canvas元素的Document对象的起源不同。