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

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

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

能不能让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. [Luogu1365] WJMZBMR打osu! / Easy

    Description 某一天WJMZBMR在打osu~~~但是他太弱逼了,有些地方完全靠运气:( 我们来简化一下这个游戏的规则 有 \(n\) 次点击要做,成功了就是o,失败了就是x,分数是按com ...

  2. Linux终端命令全面介绍

    Linux终端命令 一.文件目录类 1.建立目录:mkdir 目录名2.删除空目录:rmdir 目录名3.无条件删除子目录: rm -rf 目录名4.改变当前目录:cd 目录名 (进入用户home目录 ...

  3. 菜鸟入门【ASP.NET Core】2：部署到IIS

    配置IIS模块 ASP.NET Core Module载地址:https://docs.microsoft.com/en-us/aspnet/core/fundamentals/servers/asp ...

  4. NPOI 通过excel模板写入数据并导出

    private void ToExcel(string id) { //模板文件 string TempletFileName = Server.MapPath("template.xls& ...

  5. C#7.2——编写安全高效的C#代码

    原文地址:https://docs.microsoft.com/zh-cn/dotnet/csharp/write-safe-efficient-code?view=netcore-2.1 值类型的优 ...

  6. MySQL学习（三） SQL基础查询

    其实在数据库最经常用的当属查询操作 基本语法 SELECT [ALL | DISTINCT | DISTINCTROW ] 字段列表 AS 字段别名 [FROM 表名 WHERE 条件表示式 GROU ...

  7. Web设计中打开新页面或页面跳转的方法

    一.asp.net c# 打开新页面或页面跳转 1. 最常用的页面跳转(原窗口被替代):Response.Redirect("newpage.aspx"); 2. 利用url地址打 ...

  8. Python全栈学习_day002作业

    Day2作业及默写 1.判断下列逻辑语句的True,False. 1)1 > 1 or 3 < 4 or 4 > 5 and 2 > 1 and 9 > 8 or 7 & ...

  9. CSS常见布局

    一.单列布局 1. 水平居中 1.1 使用inline-block和text-align .parent{text-align:center;} .child{display:inline-block ...

  10. CSS3效果：实现气泡效果

    首先定义一个 <p class="speech"></p> 先给外层的容器添加样式: p.speech { position: relative; widt ...