获取图片像素颜色并转换为CSS 3 box-shadow显示

获取图片像素颜色并转换为CSS 3 box-shadow显示2015-06-22原理：
1.使用FileReader 读取图片
2.使用canvas 的 getImageData 获取图片像素信息
3.将像素信息转换为CSS3 box-shadow
代码：
<！DOCTYPE HTML PUBLIC><html> <head><meta charset="utf-8"><title>获取图片像素颜色,转换为css3 box-shadow</title><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;}</style> <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（"图片不能大于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;// 将图片按像素写入画布context.drawImage（this, 0, 0, img_width, img_height）;// 读取图片像素信息var imageData = context.getImageData（0, 0, img_width, img_height）;var arrbox = [],length = imageData.data.length;// 生成box-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;arrbox.push（x + "px " + y + "px rgba（" + rgba + "）"）;}}}// 将数据写入domshowimg.style.width = img_width + "px";showimg.style.height = img_height + "px";shadow.style.boxShadow = arrbox.join（","）;// 输出CSS3 box-shadowcss_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）;// 补0r.length==1？ r = "0" + r : "";g.length==1？ g = "0" + g : "";b.length==1？ b = "0" + b : "";var hex = r + g + b;// 简化处理,如 FFEEDD 可以写为 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}}</script> </head> <body><p class="title">获取图片像素颜色,转换为CSS3 box-shadow</p><p><input type="file" class="file" id="img"><label class="filebtn" for="img" title="JPG,GIF,PNG">请选择图片（小于120K）</label></p><p class="showimg" id="showimg"><span></span></p><p class="css_code" id="css_code"></p> </body></html>
作者：csdn博客傲雪星枫