一、原理： 1.使用HTML5的FileReader API读取图片
FileReader文件读物器，用于读取客户端文件到，注意，文件读取完毕后并不会载入缓存 eg：2.使用HTML5 canvas 的 getImageData 获取图片像素信息
getImageData的直译即“获得图像数据”，他的作用是从canvas中提取像素出来。所以，他是有返回值的。语法及返回值
这个像素信息数组是重中之重。他包括red,green,blue,和alpha,且每个都是0-255的数值——连 alpha 也是。
这个data数组的大小由像素个数决定，即ImageData的width*height.如getImageData(1,1,1)，那data就只有一个像素信息；而getImageData(1,10,10)，则有10*10=100个。
3.将像素信息转换为CSS3 Box-shadow的值
二、实现效果：
三、实例代码：
<style type="text/css">
body{margin: 0px; background:#f2f2f0;}
p{margin:0px;}
.title{color:#FFFF00; background:#000000; text-align:center; font-size:24px; line-height:50px; font-weight:bold;}
.file{position:absolute; width:100%; font-size:90px;}
.filebtn{display:block; position:relative; height:110px; color:#FFFFFF; background:#06980e; font-size:48px; line-height:110px; text-align:center; cursor:pointer; border: 3px solid #cccccc;}
.filebtn:hover{background:#04bc0d;}
.showimg{margin:10px auto 10px auto; -webkit-transition: all .3s; transition: all .3s;}
.showimg span{width:1px; height:1px; display:block; margin: -1px 0px 0px -1px;}
.css_code{margin:10px; padding:10px; display:none; border:1px solid #FFCC00; font-size:12px; background:#F1F1F1; white-space:pre-wrap; word-wrap:break-word; height:300px; overflow:auto;}
.css_code:hover{
background:#DEFEDE;
}
<script type="text/javascript">
window.onload = function(){
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var showimg = document.getElementById('showimg');
var shadow = showimg.getElementsByTagName('span')[0];
var css_code = document.getElementById('css_code');
document.getElementById('img').onchange = function(){
var img = event.target.files[0];
// 检查能否读取图片if(!img){return ;}// 检查图片类型if(!(img.type.indexOf('image')==0 && img.type && /\.(?:jpg|png|gif)$/.test(img.name)) ){alert('图片只能是jpg,gif,png');return ;}// 检查图片尺寸if(img.size > 120*1024){alert('<a href="/tag/tupian/" target="_blank" class="keywords">图片</a>不能大于120K');return ;}// file readervar reader = new FileReader();reader.readAsDataURL(img);reader.onload = function(e){ // reader onload startvar image = new Image();image.src = e.target.result;image.onload = function(){ // image onload startvar img_width = this.width;var img_height = this.height;// 设置画布尺寸canvas.width = img_width;canvas.height = img_height;// 将<a href="/tag/tupian/" target="_blank" class="keywords">图片</a>按像素写入画布context.drawImage(this,img_width,img_height);// 读取<a href="/tag/tupian/" target="_blank" class="keywords">图片</a>像素信息var imageData = context.getImageData(0,img_height);var arr<a href="/tag/Box/" target="_blank" class="keywords">Box</a> = [],length = imageData.data.length;// <a href="/tag/shengcheng/" target="_blank" class="keywords">生成</a><a href="/tag/Box/" target="_blank" class="keywords">Box</a>-shadowfor(var i=0; i<length; i++){if(i%4 === 0){ // 每四个元素为一个像素数据 r,g,b,alphavar x = i/4%img_width + 1; // 横坐标var y = Math.floor(i/4/img_width) + 1; // 纵坐标var alpha = Math.round(imageData.data[i+3]/255*100)/100; // alpha 值if(imageData.data[i+3]==255){ // 没有alpha 值var hex = gethex(imageData.data[i],imageData.data[i+1],imageData.data[i+2]);arrbox.push(x + 'px ' + y + 'px #' + hex);}else if(alpha>0){ // 有alpha 值var rgba = imageData.data[i] + ',' + imageData.data[i+1] + ',' + imageData.data[i+2] + ',' + alpha;arr<a href="/tag/Box/" target="_blank" class="keywords">Box</a>.push(x + 'px ' + y + 'px rgba(' + rgba + ')');}}}// 将数据写入domshowimg.style.width = img_width + 'px';showimg.style.height = img_height + 'px';shadow.style.<a href="/tag/Box/" target="_blank" class="keywords">Box</a>Shadow = arr<a href="/tag/Box/" target="_blank" class="keywords">Box</a>.join(',');// <a href="/tag/shuchu/" target="_blank" class="keywords">输出</a>CSS3 <a href="/tag/Box/" target="_blank" class="keywords">Box</a>-shadowcss_code.style.display = 'block';css_code.innerHTML = '<a href="/tag/Box/" target="_blank" class="keywords">Box</a>-shadow: ' + arr<a href="/tag/Box/" target="_blank" class="keywords">Box</a>.join(',');// <a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>16进制颜色function gethex(r,b){r = r.toString(16);g = g.toString(16);b = b.toString(16);// 补0r.length==1? r = '0' + r : '';g.length==1? g = '0' + g : '';b.length==1? b = '0' + b : '';var hex = r + g + b;// 简化处理,如 F<a href="/tag/Feed/" target="_blank" class="keywords">Feed</a>D 可以写为 FEDif(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
}
}
图片(小于120K)
@H_502_4@
