2.使用HTML5 canvas 的 getImageData 获取图片像素信息
getImageData的直译即“获得图像数据”，他的作用是从canvas中提取像素出来。所以，他是有返回值的。
语法及返回值
这就是他的语法。而他的返回值是一个ImageData对象： 这个ImageData对象包括：width,height,以及一个像素信息数组data。这个像素信息数组是重中之重。他包括red,green,blue,和alpha,且每个都是0-255的数值——连 alpha 也是。
这个data数组的大小由像素个数决定，即ImageData的width*height.如getImageData(1,1,1,1)，那data就只有一个像素信息；而getImageData(1,1,10,10)，则有10*10=100个。
3.将像素信息转换为CSS3 box-shadow的值
二、实现效果：
三、实例代码：
输出CSS3 box-shadow css_code.style.display = 'block'; css_code.innerHTML = 'box-shadow: ' + arrbox.join(','); // 获取16进制颜色 function gethex(r,g,b){ r = r.toString(16); g = g.toString(16); b = b.toString(16); // 补0 r.length==1? r = '0' + r : ''; g.length==1? g = '0' + g : ''; b.length==1? b = '0' + b : ''; var hex = r + g + b; // 简化处理,如 FFEEDD 可以写为 FED if(r.slice(0,1)==r.slice(1,1) && g.slice(0,1)==g.slice(1,1) && b.slice(0,1)==b.slice(1,1)){ hex = r.slice(0,1) + g.slice(0,1) + b.slice(0,1); } return hex; } } // image onload end } // reader onload end } }获取图片像素颜色,转换为css3 box-shadow
获取图片像素颜色,转换为CSS3 box-shadow
下载本文