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

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

var upfile = document.querySelector（"#upfile"）;var fileReader = new FileReader（）;fileReader.onload = function（evt）{ if（FileReader.DONE==fileReader.readyState）{ var img = document.createElement（"img"）; img.src = this.result; //是Base64的data url数据 document.body.appendChild（img）; console.log（fileReader）; }}fileReader.readAsDataURL（upfile.files[0]）;

2.使用HTML5 canvas 的 getImageData 获取图片像素信息
getImageData的直译即“获得图像数据”，他的作用是从canvas中提取像素出来。所以，他是有返回值的。
语法及返回值

ctx.getImageData（x,y,width,height）;

这就是他的语法。而他的返回值是一个ImageData对象：

ImageData { width=10, height=10, data=Uint8ClampedArray}

这个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的值
二、实现效果：

2016311145900784.jpg （540×740）

三、实例代码：

<！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 reader var 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-shadow for（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 + "）"）; }} }// 将数据写入dom showimg.style.width = img_width + "px"; showimg.style.height = img_height + "px";shadow.style.boxShadow = arrbox.join（","）;// 输出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 }}</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>