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

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

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

能不能让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. 公众号第三方平台开发 教程二 component_verify_ticket和accessToken的获取

    公众号第三方平台开发 教程一 创建公众号第三方平台 公众号第三方平台开发 教程二 component_verify_ticket和accessToken的获取 公众号第三方平台开发 教程三 微信公众号 ...

  2. 单机多实例mysq 8.0l部署安装

    单机多实例mysql部署安装 目的需求 在单台虚拟机部署部署多实例mysql,用于配置mysql replication,MHA等. 思路 多实例安装mysql可以参考<源编译MySQL8.0的 ...

  3. 【转】 Apk文件及其编译过程

    Apk文件概述 Android系统中的应用程序安装包都是以apk为后缀名,其实apk是Android Package的缩写,即android安装包. 注:apk包文件其实就是标准的zip文件,可以直接 ...

  4. Extjs4.2+webAPI+EF实现分页以及webapi的数据传值(续）

    现在领导又要增加功能,需要分页的时候,每页显示N条信息.由于是每个页面都要改,所有需要声明了一个扩展类代码如下: // Copyright : 欧蓝德畅电子技术有限公司. All rights res ...

  5. base64编码的作用【转】

    转自:https://www.zhihu.com/question/36306744/answer/71626823 X.509公钥证书也好,电子邮件数据也好,经常要用到Base64编码,那么为什么要 ...

  6. cookie和session的区别和用法

    1. 由于HTTP协议是无状态的协议,所以服务端需要记录用户的状态时,就需要用某种机制来识具体的用户,这个机制就是Session.典型的场景比如购物车,当你点击下单按钮时,由于HTTP协议无状态,所以 ...

  7. 让js中的函数只有一次有效调用的三种常用方法

    1.通过闭包来实现. <script> window.onload = function () { function once(fn) { var result; return funct ...

  8. 开发Hexo主题(一)

    Hexo是一款静态博客工具,由Node.js编写 在博客根目录的themes下,新建文件夹(文件夹名为主题名) 主题目录结构如图 这里使用模版引擎为Ejs 在Layout目录下新建index.ejs文 ...

  9. SoapUI 访问代理设置

    SoapUI 访问代理设置 by:授客 QQ:1033553122 问题描述: 运行SoapUI时,发现接口访问不通,如下图,提示"Connection to http://127.0.0. ...

  10. JavaScript日期排序

    //日期排序 function sortDownDate(a, b) { return Date.parse(a.received) - Date.parse(b.received); } funct ...