js获取图片颜色

最新推荐文章于 2024-05-07 10:42:59 发布

dfibjt5177

最新推荐文章于 2024-05-07 10:42:59 发布

阅读量5.1k

点赞数 1

文章标签：前端 javascript ViewUI

原文链接：http://www.cnblogs.com/su-zhifei/p/10399277.html

版权

JS获取图片颜色：

可以获取图片所有颜色，也可以指定位置的颜色

<!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>

<!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>

转载于:https://www.cnblogs.com/su-zhifei/p/10399277.html

dfibjt5177

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
js获取图片颜色

JS获取图片颜色：可以获取图片所有颜色，也可以指定位置的颜色<!DOCTYPE HTML PUBLIC> <html> <head> <meta charset="utf-8"> <title>获取图片像素颜色,转换为css3 box-shadow</title> &...
复制链接

扫一扫