canvas --> getImageData()

时间 2019-12-14

标签 canvas getimagedata 繁體版

原文原文链接

getImageData() 使用时有跨域问题canvas

设置img的属性 crossOrigin="anonymous"可解决crossOrigin的问题跨域

<img src="http://xxx.cn/xxxx.JPG" id="img1" crossOrigin="anonymous">数组

首先将img画到canvas中spa

var img=document.getElementById("img");code

ctx.drawImage(img,0,0);blog

而后获取全部像素点数据图片

var imgData=ctx.getImageData(0,0,c.width,c.height);get

/*
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 反色class

(计算全部像素颜色值和255之差)im

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