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

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

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

能不能让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. Java Generator

    以前我以为只有Python才会有generator,看来当时的我才年轻,后来认真研读<Thinking in Java>之后大有感悟,原来Java亦有generator,故做一次记录分享. ...

  2. 以前没有写笔记的习惯，现在慢慢的发现及时总结是多么的重要。 这一篇文章主要关于java多线程一些常见的疑惑点。因为讲解多线程的书籍和文章已经很多了，所以我也不好意思多说，嘻嘻嘻、大家可以去参考一些那些书籍。我这个文章主要关于实际的一些问题。同时也算是我以后复习的资料吧，。还请大家多多指教。 同时希望多结交一些技术上的朋友。谢谢。

    在java中要想实现多线程,有两种手段,一种是继续Thread类,另外一种是实现Runable接口. 以下就是我们常见的问题了: 1. 为什么我们不能直接调用run()方法呢? 我的理解是:线程的运行 ...

  3. ssm简单整合（注释方法）

    1.创建web工程,选择web.xml文件,并导入相关jar包(使用的spring4.0以上版本,) 2.配置web.xml文件,包括spring.xml,springMVC.xml的加载映射,核心操 ...

  4. Java入门 第10天 ，理解数组

    数组的特点: 1.内容的类型固定,不会int String 两个类型一起,要么是int类型 要么是String类型 或者其他类型. 2.长度是固定的,例:String [ ]   myArray  = ...

  5. 关于eclipse项目的x号报错的一些问题

    有些时候项目中并未有什么问题 但项目前会有一个X号报错且无法运行项目 我们不妨从jre和Tomcat的一些配置中找原因 1,首先查看jre的安装是否正确,可以看见并未出错 ,如果有问题,重新导入一下即 ...

  6. 【开发工具之Spring Tool Suite】6、用Spring Tool Suite简化你的开发

    如果你是一个喜欢用spring的人,你可能会在欣赏spring的强大功能外,对其各样的配置比较郁闷,尤其是相差较大的版本在配置文件方面会存在差异,当然你可以去花不少的时间去网上查找相关的资料,当你准备 ...

  7. 140 - The 12th Zhejiang Provincial Collegiate Programming Contest（第三部分）

    Earthstone Keeper Time Limit: 4 Seconds      Memory Limit: 65536 KB Earthstone Keeper is a famous ro ...

  8. 再也不用担心面试官问你HashCode和equals了

    结论 如果两个对象相等,则hashcode()必须相等. 如果两个对象相等,a.equals(b)==b.equals(a)==true 如果两个对象有相同的hashcode值,他们也不一定是相等的. ...

  9. element-ui select组件中复选时以字符串形式显示

    我使用的element-ui的版本是1.4.13. 如上图所示,使用el-select组件,要实现可搜索.可复选.可创建条目时,展示样式是如上图所示,输入框的高度会撑开,影响页面布局,按照产品的需求, ...

  10. 【代码笔记】Web-ionic tab(选项卡)

    一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...