search

Home  >  Article  >  Web Front-end  >  JavaScript gets the image pixel color and converts it to box-shadow display_javascript skills

JavaScript gets the image pixel color and converts it to box-shadow display_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:11:091970browse

1. Principle:
1. Use HTML5’s FileReader API to read images
FileReader is used to read client files. Note that the cache will not be loaded after the file is read
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. Use HTML5 canvas’s getImageData to obtain image pixel information
The literal translation of getImageData is "get image data", its function is to extract pixels from canvas. Therefore, he has a return value.

Syntax and return value

ctx.getImageData(x,y,width,height);
This is his grammar. And its return value is an ImageData object: 
ImageData { width=10, height=10, data=Uint8ClampedArray}
This ImageData object includes: width, height, and a pixel information array data.

This pixel information array is the most important. It includes red, green, blue, and alpha, and each is a numerical value from 0-255 - even alpha.

The size of this data array is determined by the number of pixels, which is the width*height of ImageData. For example, getImageData(1,1,1,1), then data has only one pixel information; while getImageData(1,1,10, 10), then there are 10*10=100.

3. Convert pixel information into the value of CSS3 box-shadow

2. Realization effect:

2016311145900784.jpg (540×740)

3. Example code: 

<!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 && /\.(&#63;: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&#63; r = '0' + r : ''; 
          g.length==1&#63; g = '0' + g : ''; 
          b.length==1&#63; 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>

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：JavaScript Advanced Programming (Third Edition) Study Notes Chapter 1~5_javascript skillsNext article：JavaScript Advanced Programming (Third Edition) Study Notes Chapter 1~5_javascript skills

Related articles

See more