上篇博客提到过，box-shadow属性的本质是对形状的复制，那么如果我设置一个1*1px的i标签，利用box-shadow可以叠加的特性，给每一个1*1px的阴影赋上颜色，那么最后不就是一幅图片了么。

html代码很简单：

<!doctype html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

<title>canvas</title>

<style>

    #shadow {

        position: relative;

    }

    #shadow i {

        display: block;

        width: 1px;

        height: 1px;

    }

</style>

<script src="shadowShow.class.js" defer="defer"></script>

</head>

<body>

<input id="file" class="file-upload" type="file" accept="image/png, image/gif" />

<canvas id="canvas">

    您的浏览器不支持canvas标签

</canvas>

<div id="shadow"><i></i></div>

<script>

var init = {

    fileObj: 'file',  //input控件的id

    canvas: 'canvas',  //canvas的标签的id

    shadowBox: 'shadow',  //用于阴影显示的标签的id

};

</script>

</body>

</html>

　　做了一个简单的图片上传控件，页面的js里读取了一些简单的控件信息。

　　最初在直接用控件获取图片路径时，碰到了路径显示为fakepath的问题（直接给控件赋路径src='#'有效果），所以没法读取图片的路径。

　　查询后使用了FileReader()解决了这个问题，FileReader()读取图片信息的使用很简单，请自行百度。

　　重点还是用canvas的getImageData()获取了图片每个像素点的rgba信息。图片上的每个点都有rgb三原色加上一个透明度的信息，这些信息都放在getImageData()的data数组里，换句话说，data数组里每4个值组合起来就是一个像素点的颜色信息。而每个像素点的位置可以根据这是第几个像素点（每个像素点都是1*1px），加上原图片的长宽信息来计算得出，宽度上data数组里每4个值宽度加1px，如果像素点的宽度超过了图片的宽度，那么就说明该像素点是下一行的，即将高度加1px，宽度重置。

　　又像素点的信息都是保存在一个名叫data的一维数据里，且每4条数据是一个像素点的颜色信息，所以可以每4条数据一读，比如 if (i % 4 === 0)，那么像素点的red通道即是image.data[index]，green通道是imageData.data[index + 1]，blue通道是imageData.data[index + 2]，alpha通道是imageData.data[index + 3]，最后把这些颜色信息处理下通通push到一个数组里，赋给i标签的box-shadow属性就大功告成。

　　下面给出完整的js代码：

(function() {

    /**

    最初我的init方法是这样的，但是在对象的属性里添加监听事件貌似无效，所以挪到了对象外

    init: function() {

            console.log(this.fileObj);

             this.fileObj.addEventListener('change', function() {

                shadowShow.upPic();

             });

        },

    */

    document.getElementById(init.fileObj).addEventListener('change', function() {

        shadowShow.init();

    });

    var shadowShow =  {

        fileObj: document.getElementById(init.fileObj),

        canvas: document.getElementById(init.canvas),

        ctx: this.canvas.getContext('2d'),

        shadowBox: document.getElementById(init.shadowBox),

        init: function() {

            shadowShow.upPic();

        },

    /**

    *用于获取上传的图片的信息并在canvas1中显示

    *@method upPic

    */

        upPic: function() {

            image = new Image();

            this.setImageUrl(image, this.fileObj);

            image.onload = function() {

                // cavas的宽高用setAttribute设置，用canvas.width也可以，注意值不能加上单位

                width = this.width;

                height = this.height;

                shadowShow.canvas.setAttribute('width', width);

                shadowShow.canvas.setAttribute('height', height);

                shadowShow.ctx.drawImage(this, 0, 0, width, height);

                shadowShow.toShadowShow(this, shadowShow.ctx);

            }

        },

    /**

    *用于设置创建的iamge对象的url

    *@method setImageUrl

    *@param {obj} image 创建的iamge对象

    *@param {obj} fileQuery 上传图片的file控件对象

    */

        setImageUrl: function(image, fileQuery) {

            var file = fileQuery.files[0];

            var reader = new FileReader();

            reader.onload = function(e) {

                image.src = e.target.result;

            }

            reader.readAsDataURL(file);

        },

    /**

    *用于将上传的图片的用box-shadow表现出来

    *@method toBoxShadow

    *@param {obj} image 创建的iamge对象

    *@param {obj} context 创建的绘图的上下文对象

    */

        toShadowShow: function(image, context) {

            width = image.width;

            height = image.height;

            this.shadowBox.style.width = width + 'px';

            this.shadowBox.style.height = height + 'px';

            var imageData = context.getImageData(0, 0, width, height);

            var arrShadow = new Array();

            var index = 0;

            var interval = setInterval(function() {

                if (index < imageData.data.length) {

                    // 每4个参数处理一次

                    if (index % 4 === 0) {

                        var x = index / 4 % width + 1,  //x坐标，以index=4为例，index/4=1，表示x是第1个像素点，1%width是为了获得第n行的像素点的x坐标，又index是从0开始的（index=0是真正的第一个像素点），所以x的坐标需要加上1

                            y = Math.floor(index / 4 / width) + 1, //y坐标,

                            alpha = Math.round(imageData.data[index + 3] / 255 * 100) / 100;  //透明度，imageData.data[index+3]/255需要乘以100是因为（imageData.data[index+3]/255）肯定是小于1的，为了避免round()取整值为1，故需要乘以100

                        if (alpha == 255) {  //像素点没有透明度

                            //将rgb转为16进制

                            var redToHex = imageData.data[index].toString(16),

                                greenToHex = imageData.data[index + 1].toString(16),

                                blueToHex = imageData.data[index + 2].toString(16);

                            redToHex = redToHex.length == 1 ? ('0' + redToHex) : redToHex;

                            greenToHex = greenToHex.length == 1 ? ('0' + greenToHex) : greenToHex;

                            blueToHex = blueToHex.length == 1 ? ('0' + blueToHex) : blueToHex;

                            var hex = redToHex + greenToHex + blueToHex;

                            //对形如#FFF的十六进制颜色作处理

                            if (redToHex.slice(0,1) == redToHex.slice(-1) && greenToHex.slice(0,1) == greenToHex(-1) && blueToHex.slice(0,1) == blueToHex.slice(-1)) {

                                hex = redToHex.slice(-1) + greenToHex.slice(-1) + blueToHex.slice(-1);

                            }

                            arrShadow.push(x + 'px ' + y + 'px #' + hex);

                        } else if (alpha > 0) {

                            a = [imageData.data[index], imageData.data[index + 1], imageData.data[index + 2], alpha].join();

                            arrShadow.push(x + 'px ' + y + 'px rgba(' + a + ')');

                        }

                    }

                    shadowShow.shadowBox.querySelector('i').style.boxShadow = arrShadow.join();

                } else {

                    clearInterval(interval);  //清除setInterval

                }

                index++;

            });

        }

    };

})();

　　这段代码我封装了一下，注释写的比较详细了，同时，加了一个定时器，这样就有了一个像素一个像素显示的效果，就是如果图片的width和height值比较大的话，完整的图片显示出来会比较慢。setInterval()的默认值查了下，如果设置的时间间隔小于10，则以10来算，即10ms，但是还是感觉图片显示的挺慢的，当然了，这要看图片的像素点的数量了。

　　补充：

　　当然了，如果仅需遍历每个像素点其实也不用像上面那么麻烦（上面主要是为了获得每个点的坐标(x, y)），如下就可以了：

　　

//简单的灰阶过滤器

for (i = 0; i < imageData.data.length; i += 4) {

    var r = data[i],

         g = data[i + 1],

         b = data[i + 2],

         a = data[i + 3];

    var average = Math.floor((r + g + b) / 3);

    data[i] = data[i + 1] = data[i + 2] = average;

}

　　

　　最后更新于2016年11月22日

利用box-shadow绘图的更多相关文章

  1. 如何设置box shadow的透明度

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-04-24) 今天发现使用box-shadow属性,可以很好的给div添加阴影效果,但是添加的效果如果是: -moz-box- ...

  2. css3盒模型学习--利用box自适应布局

    box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典   的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box-flex属性还没 ...

  3. 利用numpy+matplotlib绘图的基本操作教程

    简述 Matplotlib是一个基于python的2D画图库,能够用python脚本方便的画出折线图,直方图,功率谱图,散点图等常用图表,而且语法简单.具体介绍见matplot官网. Numpy(Nu ...

  4. 【Matplotlib】利用Python进行绘图

    [Matplotlib] 教程:https://morvanzhou.github.io/tutorials/data-manipulation/plt/ 官方文档:https://matplotli ...

  5. PHP利用GD库绘图和生成验证码图片

    首先得确定php.ini设置有没有打开GD扩展功能,測试例如以下 print_r(gd_info()); 假设有打印出内容例如以下,则说明GD功能有打开: Array ( [GD Version] = ...

  6. Core Graphics框架 利用Quartz 2D绘图

    首先,什么是Core Graphics和Quartz 2D? Core Graphics:是基于Quartz 2D绘图引擎的一个C语言的API绘图框架.它也是iOS开发中最基本的框架(Framewor ...

  7. 科赫雪花利用python海龟绘图代码

    #KochDraw.py import turtle //海龟绘图 def koch(size, n): if n == 0: turtle.fd(size) else: for angle in [ ...

  8. 利用Form()使绘图可以不消失

    1: public Form1() 2: { 3: InitializeComponent(); 4: this.Show(); 5: Graphics grp = this.CreateGraphi ...

  9. 分享div、text、Box Shadow(阴影)演示及代码的页面

    附图: 直接上链接:www.css88.com/tool/css3Preview/Box-Shadow.html

  10. 利用box-shadow制作loading图

    我们见过很多利用css3做的loading图,像下面这种应该是很常见的.通常制作这种loading,我们会一个标签对应一个圆,八个圆就要八个标签.但是这种做法很浪费资源.我们可以只用一个标签,然后利用 ...

随机推荐

  1. Android 实现分页（使用TabWidget/TabHost）

    注:本文为转载,但该内容本人已亲身尝试,确认该方法可行,代码有点小的改动,转载用作保存与分享. 原作者地址:http://gundumw100.iteye.com/blog/853967 个人吐嘈:据 ...

  2. Windows操作技巧 之二（持续更新）

     定时自动关机 shutdown -s -t 3600 shutdown [/i | /l | /s | /r | /g | /a | /p | /h | /e] [/f /m \\computer] ...

  3. 4、JavaScript

    一.JavaScript的概念:是基于对象和事件的脚本语言. 1.特点: a).安全性. b).跨平台性(只要可以解释JS的浏览器就可以执行,和平台无关) 2.JavaScript与Java的区别: ...

  4. 马化腾称春节前推出微信小程序

    腾讯马化腾在第二届深商大会“互联与时代”论坛上透露,会在2017年春节前推出微信小程序.在谈到“互联网+”.开放生态等话题时,马化腾表示,腾讯从过去5年来,从封闭的环境变成一个开放的环境,变成一个真正 ...

  5. OS X EI Capitan安装refind时出现Could not set boot device property: 0xe00002bc

    参考:terminal - OSX 10.11 El Capitan - setting boot device property not working ... 解决办法: 1.重启MacMini, ...

  6. redis使用简介

    1.redis 支持"生产者与消费者模式"."订阅模式" 2.实时数据, 用数据类型.时间戳.数据内容,以二进制形式存取 3.查询时间.查询间隔时间.查询更新时 ...

  7. 微信支付 发布后显示 System:access_denied

    微信支付发布后显示 System:access_denied (android)或 System:not_allow(IOS) 我们项目用的是.NET MVC3 授权目录是:http://mynetd ...

  8. SQL 中不同类型的表连接

    http://www.linuxidc.com/Linux/2012-08/68035.htm 1.简介 在关系型数据库中,join操作是将不同的表中的数据联合在一起时非常通用的一种做法.首先让我们看 ...

  9. 安装Yeoman，遇到的问题

    在安装Yeoman遇到了一些报错,具体的步骤就不多说了,直接上码,具体的两处报错的地方. 第一个,创建webapp,直接报权限的错误,这时才留意到在它之前还有一个错误. [root@iZ289zd8c ...

  10. mac在终端下中用sublime text 2 打开文件

    alias subl=\''/Applications/Sublime Text 2.app/Contents/SharedSupport/bin/subl'\'然后subl 要打开的文件名即可但是这 ...