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