JS FIDLE CODE
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,canvas.width,canvas.height);
context.drawImage(image,canvas.height);
var imageData = context.getimageData(0,canvas.height);
filter(imageData);
context.putimageData(imageData,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;
}
解决方法
The
getimageData(sx,sy,sw,sh)method must,if the canvas element’s origin-clean flag is set to false,throw aSecurityErrorexception
这是为了防止恶意网站所有者将用户浏览器可访问的潜在私有图像加载到画布上,然后将数据发送到自己的服务器.如果出现以下情况,可以关闭原点清洁：
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.The element’s 2D context’s drawImage() method is called with an HTMLCanvasElement whose origin-clean flag is false.
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.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.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.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.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.07001