DDR爱好者之家

JavaScript获取图片像素颜色并转换为box-shadow显示
站长资源 2024/11/29 佚名
60 1538
DDR爱好者之家 Design By 杰米

一、原理：
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的值

二、实现效果：

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

三、实例代码：

<!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 && /\.("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>

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米