JavaScript获取图片像素颜色并转换为box-shadow显示_javascript技巧

 一、原理：
1.使用HTML5的FileReader API读取图片
FileReader文件读物器，用于读取客户端文件到，注意，文件读取完毕后并不会载入缓存
eg：

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

请选择图片(小于120K)