getImageData() 使用时有跨域问题
设置img的属性 crossOrigin="anonymous"可解决crossOrigin的问题
<img src="http://xxx.cn/xxxx.JPG" id="img1" crossOrigin="anonymous">
首先将img画到canvas中
var img=document.getElementById("img");
ctx.drawImage(img,0,0);
然后获取所有像素点数据
var imgData=ctx.getImageData(0,0,c.width,c.height);
/*
imgData三个属性 data图片像素数据,height图片高度,width图片宽度 imgData.data是一个Uint8ClampedArray数组 Uint8ClampedArray是TypedArray 中的一种
Int8Array; Uint8Array; Uint8ClampedArray; Int16Array; Uint16Array; Int32Array; Uint32Array; Float32Array; Float64Array; 颜色值和透明度 4个一组
rgba() 4个值都为0-255范围
data[0] red
data[1] green
data[2] blue
data[3] Alpha */
canvas 反色
(计算所有像素 颜色值和255之差)
for (var i=0;i<imgData.data.length;i+=4)
{
imgData.data[i]=255-imgData.data[i];
imgData.data[i+1]=255-imgData.data[i+1];
imgData.data[i+2]=255-imgData.data[i+2];
imgData.data[i+3]=255;
}
ctx.putImageData(imgData,0,0);