图片展示网页往往色彩繁杂，当一个网页上有多张图片的时候用户的注意力就很不容易集中，而且会造成网站整个色调风格的不可把控。

能不能把所有的预览图变成灰度图片，等用户激活某张图片的时候再上色呢？

以前，唯一的方法就是让美工做两张图，一张彩色一张黑白，费时费力。

能不能让js对图片进行一些处理呢？幸运的是，canvas就提供了图片处理的方法。

canvas+js可以让我们对图片进行像素级的操作，我们可以通过操作图像的像素实现各种图片处理效果,如模糊，马赛克，液化，调色等等。

详细代码及注释如下：

<!doctype html>

<html>

<head>

    <title>Canvas图像处理demo</title>

    <meta charset='utf-8' />

    <script src="jQuery.js" type="text/javascript"></script>

    <style>

        h1{text-align:center;}

        .outer{width:800px;margin:0 auto;}

        img{border:0;width:200px;height:350px;margin:0;padding:0;}

    </style>

</head>

<body>

    <h1>Canvas图像处理demo</h1>

    <div class='outer'>

        <img class='image' src='images/1.jpg'/>

        <img class='image' src='images/2.jpg'/>

        <img class='image' src='images/3.jpg'/>

        <img class='image' src='images/4.jpg'/>

        <img class='image' src='images/5.jpg'/>

    </div>

    <script>

　　　　　/*等图片加载完成后再执行（若图片没有加载完成，则不能正常进行图片处理）*/

        $(window).load(function(){

　　　　　　　/*克隆一张原图，把当前图片变为灰度图*/

            $('.image').each(function(){

                $(this).css({"position":"absolute"}).wrap("<div class='img_wrapper' style='display: inline-block;position:relative;float:left;'></div>").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"998","opacity":"0"}).insertBefore($(this));

                $('.img_wrapper').css({'height':$(this).height(),'width':$(this).width()});

                this.src=huidu(this.src);

            });

　　　　　　　/*通过控制彩色图片的透明度模拟上色效果*/

            $('.img_wrapper').mouseover(function(){

                   $(this).find('img:first').stop().animate({opacity:1},100);

            })

            $('.img_wrapper').mouseout(function(){

                   $(this).find('img:first').stop().animate({opacity:0},100);

            });

            /*

　　　　　　　　*function

　　　　　　　　*函数名称：huidu

　　　　　　　　*功能：把图片转换为灰度图

　　　　　　　　*参数：src（原图的url）

　　　　　　　　*返回值：（转换完成后的图片url）

　　　　　　　　*/

            function huidu(src){

　　　　　　　　　/*创建一个canvas*/

                var canvas=document.createElement('canvas');

                var ctx=canvas.getContext('2d');

                var img=new Image();

                img.src=src;

                canvas.height=img.height;

                canvas.width=img.width;

                ctx.drawImage(img,0,0);

                var imgdata=ctx.getImageData(0,0,canvas.width,canvas.height);var data=imgdata.data;

　　　　　　　　　/*灰度处理：求r，g，b的均值，并赋回给r，g，b*/

                for(var i=0,n=data.length;i<n;i+=4){

                    var average=(data[i]+data[i+1]+data[i+2])/3;

                    data[i]=average;

                    data[i+1]=average;

                    data[i+2]=average;

                }

                ctx.putImageData(imgdata,0,0);

　　　　　　　　　/*返回处理之后的src*/

                return canvas.toDataURL();

            }

        });

    </script>

</body>

</html>

基于canvas图像处理的图片展示demo的更多相关文章

  1. 基于canvas图像处理的图片 灰色图像

    图片展示网页往往色彩繁杂,当一个网页上有多张图片的时候用户的注意力就很不容易集中,而且会造成网站整个色调风格的不可把控. 能不能把所有的预览图变成灰度图片,等用户激活某张图片的时候再上色呢? 以前,唯 ...

  2. OC基础之推荐一个旋转木马（跑马灯）效果的图片展示Demo

    这个旋转木马(跑马灯)效果的图片展示Demo,包括设定旋转方向,图片倒影,背景设置,旋转速度,开始结束,点击显示选中的图片,彩色的块展示等等功能 效果图:(源码下载:https://github.co ...

  3. 一款基于jquery的手风琴图片展示效果

    今天要给大家分享一款基于jquery的手风琴图片展示效果.这款图片的展示效果鼠标经过前是灰色的,当鼠标经过时图片变大且变为彩色.效果图如下: 在线预览   源码下载 实现的代码. html代码: &l ...

  4. 基于canvas的前端图片压缩

    /*common*/ /** * canvas图片压缩 * @param {[Object]} opt [配置参数] * @param {[Function]} cbk [回调函数] * @retur ...

  5. 基于HTML5 Canvas实现的图片马赛克模糊特效

    效果请点击下面网址: http://hovertree.com/texiao/html5/1.htm 一.开门见山受美国肖像画家Chuck Close的启发,此脚本通过使用HTML5 canvas元素 ...

  6. java+js实现完整的图片展示本地目录demo

    java+js实现完整的图片展示本地目录demo 最近的项目满足需要,实现通过一个前端button点击事件,流行音乐浏览下的全部图片: 思路: - 获取到所需展示图片的本地目录内全部图片的文件绝对路径 ...

  7. 基于html5鼠标悬停图片动画展示效果

    分享一款基于html5鼠标悬停图片动画展示效果.里面包含两款不同效果的html5图片展示效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=" ...

  8. canvas图像处理汇总

    一.canvas的情况 canvas自从出来了之后,在前端的图像处理上面提供了各种各样的遍历,虽然很多的操作其实都是要应用到算法的,但是这个也给前端提供了很多的可能性,其中最终要的一个canvas函数 ...

  9. 基于canvas的二维码邀请函生成插件

    去年是最忙碌的一年,实在没时间写博客了,看着互联网行业中一个又一个人的倒下,奉劝大家,健康要放在首位,保重身体.好了,言归正传,这是17年的第一篇博文,话说这天又是产品同学跑过来问我说:hi,lenn ...

随机推荐

  1. mysqlbinlog恢复数据

    操作命令: 复制代码代码如下: show binlog events in 'mysql-bin.000016' limit 10; reset master 删除所有的二进制日志flush logs ...

  2. UIView /  UIView的布局

    //! 一个视图可以有n个子视图,但是一个视图只能有一个父视图 struct CGRect {   CGPoint origin;   CGSize size; }; CGRectMake(CGFlo ...

  3. jquery uploadify插件多文件上传

    1.jquery uploadify 下载:http://www.uploadify.com/ 2.安装:解压后拷贝的工程目录下面,如:WebRoot/uploaddify 3.配置项说明: uplo ...

  4. Unsupported major.minor version 52.0 处理方式

    Exception in thread "main" java.lang.UnsupportedClassVersionError: com/globalroam/openstac ...

  5. windows下使用php重命名目录下的文件

    rename函数一直报错,最后发现是windows下文件名的编码问题,如果项目文件是utf-8的话,一定要经过一步转码 $dir = $path . '/../resource/logo'; $han ...

  6. sqlserver2008 case when then else end

    在写sql语句的时候,有时候我们需要对字段的只进行判断计算.查看了下相关文档在sql2012.sql2014里边可以使用  IIF 函数直接完成. 但是现在我需要在sql2008版本中完成最字段的计算 ...

  7. (转)syslog日志等级

    设施.优先级”(facility.priority)设施(facility): kern 0 内核日志消息 user 1 随机的用户日志消息 mail 2 邮件系统日志消息 daemon 3 系统守护 ...

  8. KEIL的宏汇编器A51介绍

    A51是一种具有通用特性和用法的重定位宏汇编器.它与Intel公司的MASM51宏汇编器具有很好兼容性,支持模块化编程,可以方便地与高级语言接口.A51宏汇编器支持汇编伪指令.宏处理指令以及汇编控制命 ...

  9. PowerShell常用的属性

    get-location | get-member  -membertype  property -------获取对象的属性---------- 获取对象特定的成员, 湖区.Net Framwork ...

  10. 阵列卡,组成的磁盘组就像是一个硬盘,pci-e扩展出sata3.0

    你想提升性能,那么组RAID0,主板上的RAID应该是软RAID,肯定没有阵列卡来得稳定.如果你有闲钱,可以考虑用阵列卡. 不会的.即使不能起到RAID的作用,起码也可以当作直接连接了2个硬盘.不会影 ...