关闭

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

标签: CSS3box-shadowhtml5FileReader
15490人阅读 评论(0) 收藏 举报
分类:

原理:

1.使用FileReader 读取图片

2.使用canvas 的 getImageData 获取图片像素信息

3.将像素信息转换为CSS3 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>


1
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

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

原理: 1.使用FileReader 读取图片 2.使用canvas 的 getImageData 获取图片像素信息 3.将像素信息转换为CSS3 box-shadow 代码: ...
  • fdipzone
  • fdipzone
  • 2013-12-01 01:20
  • 15490

iOS代码获取图片主色调

最近的开发过程中,有一个功能是根据银行的图标来确定cell的背景颜色,即获取图片的主色调。网上搜索了一些方法,发现有位博主分享了一个很好的代码方法,不过效果感觉不是特别明显,或者说变化不是很大,如图:...
  • Small_Tgs
  • Small_Tgs
  • 2016-04-14 14:12
  • 3942

python图像主色调(主颜色)提取,在hsv空间k均值迭代实现

本人新手一枚,所编写的代码基本尽量没调用库类,所以感觉代码会很臃肿,连三级代码都称不上哈,这个主色调也是看了一天python后,现学现用的。可以微博关注@劉煌煌爱喝冬瓜茶     一起交流学习! 一、...
  • lhh31
  • lhh31
  • 2016-07-24 18:53
  • 2252

css3边框——圆角效果(border-radius)、阴影(box-shadow)、边框应用图片(border-image)

1.圆角效果(border-radius)
  • bymyself11
  • bymyself11
  • 2016-07-19 15:49
  • 3128

CSS3中border-radius、box-shadow与gradient那点事儿

  • 2015-09-29 10:17
  • 39KB
  • 下载

css3阴影box-shadow使用个人笔记

基本语法:box-shadow: inset h-shadow v-shadow blur spread color; inset:可选。将外部阴影 (outset) 改为内部阴影。 h-shado...
  • liuxia666
  • liuxia666
  • 2017-08-02 10:49
  • 226

CSS3阴影box-shadow的使用和技巧总结

原文地址:http://blog.csdn.net/freshlover/article/details/7610269 text-shadow是给文本添加阴影效果,box-shadow是给...
  • tanga842428
  • tanga842428
  • 2017-11-21 10:27
  • 179

CSS3阴影 box-shadow的使用总结

text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果。随着html5和CSS3的普及,这一特殊效果使用越来越普遍。 基本语法是{box-shadow:[inse...
  • u013063153
  • u013063153
  • 2016-09-03 17:06
  • 286

CSS3新特性box-shadow实现多重边框

css3中定义了许多的新特性,极大的丰富了css的表现力。本片博文意在探讨其中的新特性box-shadow。box-shadow语法如下box-shadow: h-shadow v-shadow bl...
  • yk19921114
  • yk19921114
  • 2016-06-09 00:07
  • 3676

CSS3 box-shadow实现纸张的曲线投影效果

本文地址:http://www.zhangxinxu.com/wordpress/?p=1322 一、简单的前言 一般的投影效果,尤其通过CSS实现的投影效果(无论是CSS3,还是IE滤镜),...
  • hmonkey915
  • hmonkey915
  • 2015-04-13 15:07
  • 285
    微博
    微信公众号
    微信分享公众平台-破晓领域
    破晓领域
    微信号:fdipzone-idea
    名称:破晓领域

    个人资料
    • 访问:7708684次
    • 积分:46000
    • 等级:
    • 排名:第78名
    • 原创:295篇
    • 转载:24篇
    • 译文:0篇
    • 评论:508条
    博客专栏
    最新评论