recherche

Maison >interface Web >js tutoriel >JavaScript obtient la couleur des pixels de l'image et la convertit en compétences box-shadow display_javascript

JavaScript obtient la couleur des pixels de l'image et la convertit en compétences box-shadow display_javascript

WBOY
WBOYoriginal
2016-05-16 15:11:092001parcourir

1.Principe :
1. Utilisez l'API FileReader de HTML5 pour lire les images
FileReader est utilisé pour lire les fichiers clients. Notez que le cache ne sera pas chargé une fois le fichier lu
. par exemple : 

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. Utilisez getImageData du canevas HTML5 pour obtenir des informations sur les pixels de l'image
La traduction littérale de getImageData est "obtenir des données d'image", sa fonction est d'extraire les pixels du canevas. Il a donc une valeur de retour.

Syntaxe et valeur de retour

ctx.getImageData(x,y,width,height);
C'est sa grammaire. Et sa valeur de retour est un objet ImageData : 
ImageData { width=10, height=10, data=Uint8ClampedArray}
Cet objet ImageData comprend : la largeur, la hauteur et un tableau d'informations sur les pixels.

Ce tableau d'informations sur les pixels est le plus important. Il comprend le rouge, le vert, le bleu et l'alpha, et chacun est une valeur numérique comprise entre 0 et 255, voire alpha.

La taille de ce tableau de données est déterminée par le nombre de pixels, qui est la largeur*hauteur de ImageData. Par exemple, getImageData(1,1,1,1), alors les données n'ont qu'une seule information de pixel tandis que getImageData. (1,1,10, 10), alors il y a 10*10=100.

3. Convertissez les informations de pixel en valeur de box-shadow CSS3

2. Effet de réalisation :

2016311145900784.jpg (540×740)

3. Exemple de 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>

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Notes d'étude sur la programmation avancée JavaScript (troisième édition) Chapitre 1 ~ 5_compétences javascriptArticle suivant：Notes d'étude sur la programmation avancée JavaScript (troisième édition) Chapitre 1 ~ 5_compétences javascript

Articles Liés

Voir plus