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

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

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

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

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

详细代码及注释如下：

<!doctype html>

<html>

<head>

    <title>Canvas图像处理demo-by-@谢帅shawn</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图像处理的图片 灰色图像的更多相关文章

  1. 基于canvas图像处理的图片展示demo

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

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

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

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

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

  4. 基于qml创建最简单的图像处理程序（3）-使用opencv&qml进行图像处理

    <基于qml创建最简单的图像处理程序>系列课程及配套代码基于qml创建最简单的图像处理程序(1)-基于qml创建界面http://www.cnblogs.com/jsxyhelu/p/83 ...

  5. 基于qml创建最简单的图像处理程序（2）-使用c++&qml进行图像处理

     <基于qml创建最简单的图像处理程序>系列课程及配套代码基于qml创建最简单的图像处理程序(1)-基于qml创建界面http://www.cnblogs.com/jsxyhelu/p/8 ...

  6. Python图像处理丨基于OpenCV和像素处理的图像灰度化处理

    摘要:本篇文章讲解图像灰度化处理的知识,结合OpenCV调用cv2.cvtColor()函数实现图像灰度操作,使用像素处理方法对图像进行灰度化处理. 本文分享自华为云社区<[Python图像处理 ...

  7. canvas图像处理汇总

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

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

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

  9. HTML5标签canvas图像处理

    摘要: canvas可以读取图片后,使用drawImage方法在画布内进行重绘.本文介绍canvas的图像处理 drawImage drawImage() 方法在画布上绘制图像.画布或视频.drawI ...

随机推荐

  1. html 颜色选择器 亲测，很好用

    @*以下 是测试html 颜色选择器的*@ @*<a href="#" mce_href="#" onclick="initColorPicke ...

  2. angularjs学习第五天笔记（第二篇：表单验证升级篇）

    您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...

  3. ModBus通信协议的【主从模式】

    主从模式 (1) 至少且只有一个主机,其他的都是从机 (2) 不管任何时候,从机都不能主动向主机发送数据 (3) 主机具有访问从机的权限,从机不可以主动访问从机,任何一次数据交换,都要由主机发起 (4 ...

  4. 【RabbitMQ】6、rabbitmq生产者的消息确认

    通过Publisher Confirms and Returns机制,生产者可以判断消息是否发送到了exchange及queue,而通过消费者确认机制,Rabbitmq可以决定是否重发消息给消费者,以 ...

  5. DotNetCore 结合 Nginx 将网站部署到阿里云

    基础环境配置 域名和服务器请先自行购买 基于 云服务器ECS 创建一个应用实例,选择系统镜像为 Ubuntu 16.04,在本机通过 SSH 进行远程连接,并进行相关配置 ssh root@http: ...

  6. inheritPrototypal.js

    // 原型式继承 // 其基本思路是借助原型可以基于已有的对象创建新的对象 function object(o){ function F(){} F.prototype = o; return new ...

  7. Python 函数介绍

    函数的作用 1.减少重复代码 2.方便修改,更易扩展 3.保持代码一致性 函数的命名规则: 1.函数名必须以下划线或字母开头,可以包含任意字母,数字或下划线的组合,不能使用任何的标点符号. 2.函数名 ...

  8. React 入门学习笔记整理（一）——搭建环境

    使用create-react-app脚手架搭建环境 1.安装node .软件下载地址:https://nodejs.org/en/,我下的推荐的版本. 安装之后测试是否安装成功.windows系统下, ...

  9. Microsoft Dynamics CRM 9.0 OP 版本 移动端

    本次OP 版本做了架调整,新的移动端基本可以满足客户需求,其内容自己可配置选择,满足了一般企业的应用处理. 具体操作如下: 1.登录APP选择应用(我使用手机浏览器) 2.打开默认应用,现在就一个木得 ...

  10. Salesforce 小知识 - 必需字段

    将字段定义为"必需" 当我们为对象设置字段的属性时,我们需要让某些字段在建立记录的时候必需有值,比如定义一个"地址"对象,那么必须填入"邮编" ...