使用<canvas>对象在浏览器中把一幅彩色图片变成灰度图片。

grayscale.html

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Grayscale Canvas Example</title>

     <script src="js/grayscale.js"></script>

 </head>

 <body>

     <img src="data:images/bigben.jpg" id="bigben" title="BigBen" alt="My Bigben" />

 </body>

 </html>

grayscale.js文件：

 /**

  * Created by Administrator on 2017/1/6.

  */

 function convertToGS(img) {

     //if(!Modernizr.canvas) return;

     if(!document.createElement("canvas")) return false;

     //存储原始的彩色版

     img.color = img.src;

     //创建灰度版

     img.grayscale = createGSCanvas(img);

     //在mouseover/out事件发生时切换图片

     img.onmouseover = function () {

         this.src = img.color;

     }

     img.onmouseout = function () {

         this.src = img.grayscale;

     }

     img.onmouseout();

 }

 function createGSCanvas(img) {

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

     canvas.width = img.width;

     canvas.height = img.height;

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

     ctx.drawImage(img,0,0);

     //getImageData只能操作与脚本位于同一个域中的图片

     var c = ctx.getImageData(0,0,img.width,img.height);

     for(var i=0;i<c.height;i++){

         for(var j=0;j<c.width;j++){

             var x = (i*4)*c.height+(j*4);

             var r = c.data[x];

             var g = c.data[x+1];

             var b = c.data[x+2];

             c.data[x] = c.data[x+1] = c.data[x+2] = (r+g+b)/3;

         }

     }

     ctx.putImageData(c,0,0,0,0,c.width,c.height);

     return canvas.toDataURL();

 }

 window.onload = function () {

     convertToGS(document.getElementById('bigben'));

 }

利用Canvas编辑图片的更多相关文章

  1. 利用 canvas 破解 某拖动验证码

    利用 canvas 破解 某拖动验证码 http://my.oschina.net/u/237940/blog/337194

  2. 利用Canvas进行绘制XY坐标系

    首先来一发图 绘制XY的坐标主要是利用Canvas setLeft和setBottom功能(Canvas内置坐标的功能) 1.首先WPF中的坐标系都是从左到右,从上到下的 即左上角位置(0,0)点,所 ...

  3. 利用canvas实现的中点Bresenham算法

    Bresenham提出的直线生成算法的基本原理是,每次在最大位移方向上走一步,而另一个方向是走步还是不走步取决于误差项的判别,具体的实现过程大家可以去问度娘.我主要是利用canvas画布技术实现了这个 ...

  4. 利用canvas压缩图片

    现在手机拍的照片动不动就是几M,当用户上传手机里的照片时一个消耗流量大,一个上传时间长,为了解决这个问题,就需要压缩图片: 想法:利用canvas重绘图片,保持宽高比不变,具体宽高根本具体情况而定. ...

  5. HTML5利用canvas，把多张图合并成一张图片

    需求分析,根据当前网页中的几张图片,在手机上长按,保存图片到相册或者发送给好友. drawCanvas(){ var self = this; var imgsrcArray = [ require( ...

  6. 利用canvas将网页元素生成图片并保存在本地

    利用canvas将网页元素生成图片并保存在本地 首先引入三个文件: 1.<script type="text/javascript" src="js/html2ca ...

  7. 利用canvas对上传图片进行上传前压缩

    利用谷歌调式工具发现,图片大小直接影响着首屏加载时间. 且考虑到后期服务端压力,图片压缩特别必要. 本文是前端利用canvas实现图片.参考文章:https://www.cnblogs.com/007 ...

  8. 10分钟，利用canvas画一个小的loading界面

    首先利用定义下canvas得样式 <canvas width="1024" height="720" id="canvas" styl ...

  9. 利用canvas和RGraph作图

    利用canvas可以直接在页面中绘制各种复杂的图形,其中引用到一个Rgraph的插件. Rgraph插件使用非常方便,只需几步就可以完成一个折线图.饼图.柱状图,或是其中两者图形的结合! (1) 引用 ...

随机推荐

  1. web应用程序性能优化

    web应用程序基本上都是在浏览器地址栏输入一段网站,然后进入,最后浏览器显示你想要的东西. 这就是用户所能体会到的东西.那作为程序员我们看到了什么呢? 一次HTTP 请求主要的流程是: 1.DNS服务 ...

  2. Java-集合-第三题 有如下Student 对象， private String name; private int age; private int score; private String classNum; 其中，classNum 表示学生的班号，例如“class05”。 有如下List List list = new ArrayList(); l

    第三题 有如下Student 对象, private String name; private int age; private int score; private String classNum; ...

  3. Mongodb安装与配置详解

    简介: mongodb作为一款通用型数据库,除了能够创建,读取,更新和删除数据外,还提供一系列不断扩展的独特功能. a.索引: mongodb支持二级索引,允许多种快速查询,且提供和唯一索引,复合索引 ...

  4. Android线程处理之Handler

    上一篇已经简单为大家介绍了一下关于Handler的使用,本篇我们就一起再来探讨一下Handler的高级使用,上一篇我们仅仅是简单的进行UI界面的更新,本篇我们来一起探讨一下如何把子线程的数据发送到主线 ...

  5. 编译原理简单语法分析器（first,follow,分析表）源码下载

    编译原理(简单语法分析器下载) http://files.cnblogs.com/files/hujunzheng/%E5%8A%A0%E5%85%A5%E5%90%8C%E6%AD%A5%E7%AC ...

  6. Lua 学习笔记（四）语句与控制结构

    一.赋值与多重赋值      赋值的基本含义是改变一个变量的值或table中字段的值.Lua中允许“多重赋值”,也就是同时为多个值赋予多个变量,每个变量之间以逗号分隔.      Lua会先对等号右边 ...

  7. C# Socket系列二 简单的创建 socket 通信

    看了系列一 我们开启了对socket tcp的监听状态,那么这一章我们来讲解怎么创建socket的通信代码 我新建一个类 TSocketBase public abstract class TSock ...

  8. SQL Server安全（7/11）：使用跨数据库所有权链接（Cross-Database Ownership Chaining）的跨数据库安全

    在保密你的服务器和数据,防备当前复杂的攻击,SQL Server有你需要的一切.但在你能有效使用这些安全功能前,你需要理解你面对的威胁和一些基本的安全概念.这篇文章提供了基础,因此你可以对SQL Se ...

  9. Javascript动画效果（一）

    Javascript动画效果(一) 前面我们介绍了Javascript的回到顶部效果,今天呢,我们对Javascript动画做进一步的研究.在这篇博文中我们只介绍简单的匀速运动.简单的缓冲运动和简单的 ...

  10. 基于HT for Web的Web SCADA工控移动应用

    在电力.油田燃气.供水管网等工业自动化领域Web SCADA的概念已经提出了多年,早先年的Web SCADA前端技术大部分还是基于Flex.Silverlight甚至Applet这样的重客户端方案,在 ...