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