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

2019-11-20 10:24:02

字体：大中小

来源：转载

供稿：网友

一、原理：
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 start        var image = new Image();       image.src = e.target.result;        image.onload = function(){ // image onload start          var 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,alpha              var 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>

上一篇：原生JavaScript制作微博发布面板效果

下一篇：详解Angularjs中的依赖注入