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


Posted in Javascript onMarch 11, 2016

一、原理:
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 && /\.(?: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 相关文章推荐
JQUERY获取form表单值的代码
Jul 17 Javascript
JSON字符串和对象之间的转换详解
May 26 Javascript
js生成随机数(指定范围)的实例代码
Jul 10 Javascript
JS模拟实现方法重载示例
Aug 03 Javascript
jquery uploadify隐藏上传进度的实现方法
Feb 06 Javascript
JavaScript创建对象_动力节点Java学院整理
Jun 27 Javascript
Javascript中JSON数据分组优化实践及JS操作JSON总结
Dec 22 Javascript
JavaScript实现计算多边形质心的方法示例
Jan 31 Javascript
js实现按钮开关单机下拉菜单效果
Nov 22 Javascript
Element-Ui组件 NavMenu 导航菜单的具体使用
Oct 24 Javascript
JavaScript中的执行环境和作用域链
Sep 04 Javascript
vue完美实现el-table列宽自适应
May 08 Vue.js
详解Angularjs中的依赖注入
Mar 11 #Javascript
详解AngularJS过滤器的使用
Mar 11 #Javascript
javascript html5 canvas实现可拖动省份的中国地图
Mar 11 #Javascript
js仿百度登录页实现拖动窗口效果
Mar 11 #Javascript
基于jQuery日历插件制作日历
Mar 11 #Javascript
jQuery Html控件基本操作(日常收集整理)
Mar 11 #Javascript
JavaScript获取客户端IP的方法(新方法)
Mar 11 #Javascript
You might like
JavaScript中令你抓狂的魔术变量
2006/11/30 Javascript
javascript模仿msgbox提示效果代码
2008/06/10 Javascript
js 复制或插入Html的实现方法小结
2010/05/19 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
2013/01/23 Javascript
IE下写xml文件的两种方式(fso/saveAs)
2013/08/05 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
2015/09/10 Javascript
javascript创建对象、对象继承的实用方式详解
2016/03/08 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
2016/04/04 Javascript
Angular.JS学习之依赖注入$injector详析
2016/10/20 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
2016/12/25 Javascript
原生js实现商品放大镜效果
2017/01/12 Javascript
深入理解vue-loader如何使用
2017/06/06 Javascript
js实现本地时间同步功能
2017/08/26 Javascript
React中上传图片到七牛的示例代码
2017/10/10 Javascript
jQuery无冲突模式详解
2019/01/17 jQuery
回顾Javascript React基础
2019/06/15 Javascript
JavaScript实现通讯录功能
2020/12/27 Javascript
[02:23]2018DOTA2亚洲邀请赛趣味视频——反应测试
2018/04/04 DOTA
[01:09:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第一场 6.2
2018/06/04 DOTA
详解Python的Django框架中的中间件
2015/07/24 Python
Python中标准模块importlib详解
2017/04/16 Python
Python学习之用pygal画世界地图实例
2017/12/07 Python
python实现壁纸批量下载代码实例
2018/01/25 Python
详解django的serializer序列化model几种方法
2018/10/16 Python
python实现定时压缩指定文件夹发送邮件
2020/12/22 Python
CSS3动画:5种预载动画效果实例
2017/04/05 HTML / CSS
HTML中fieldset标签概述及使用方法
2013/02/01 HTML / CSS
Lyle & Scott苏格兰金鹰官网:英国皇室御用品牌
2018/05/09 全球购物
网络教育毕业生自我鉴定
2013/10/10 职场文书
先进班级集体事迹材料
2014/01/30 职场文书
文秘人员工作职责
2014/01/31 职场文书
中学生获奖感言
2014/02/04 职场文书
简历里的自我评价范文
2014/02/24 职场文书
文案策划求职信
2014/04/14 职场文书
《黄山奇石》教学反思
2014/04/19 职场文书
python识别围棋定位棋盘位置
2021/07/26 Python