canvas --> getImageData()

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