使用<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. How Google TestsSoftware - Part Two

    In order for the "you buildit, you break it" motto to be real, there are roles beyond the ...

  2. Java基础-接口中国特色社会主义的体制中有这样的现象：地方省政府要坚持党的领导和按 照国务院的指示进行安全生产。请编写一个java应用程序描述上述的体制现象。 要求如下： （1）该应用程序中有一个“党中央”接口：CentralPartyCommittee，该接口中 有个“坚持党的领导”方法：void partyLeader() （2）该应用程序中有一个“国务院”抽象类：StateCouncil，

    36．中国特色社会主义的体制中有这样的现象:地方省政府要坚持党的领导和按 照国务院的指示进行安全生产.请编写一个java应用程序描述上述的体制现象. 要求如下: (1)该应用程序中有一个“党中央”接口 ...

  3. hibernate(五) hibernate一对一关系映射详解

    序言 之前讲解了一对多(单向.双向).多对多(双向),今天就讲解一下最后一个关系,一对一. 心情不错.状态也挺好的,赶紧写一篇博文造福一下大家把. --WH 一.一对一关系的概述 一对一关系看起来简单 ...

  4. 浅谈Winform事件的实现以及模拟其事件的实现(附实现源码)

    当我们初学Winform的时候被其神奇的事件功能所吸引,当点击一个按钮时,便会跳到我们所写的点击方法当中去.然而这并不符合我们对方法的理解,究竟.net在后面帮助我们实现了什么.我们怎样模拟其事件的实 ...

  5. JS的IE和Firefox兼容性

    以下以 IE 代替 Internet Explorer,以 MF 代替 Mozzila Firefox 0.px的问题 obj.style.left = ”100px”; obj.style.top ...

  6. Android入门(十四)内容提供器-实现跨程序共享实例

    原文链接:http://www.orlion.ga/661/ 打开SQLite博文中创建的 DatabaseDemo项目,首先将 MyDatabaseHelper中使用 Toast弹出创建数据库成功的 ...

  7. IO流-ZIP文档

    java中通常使用ZipInputStream来读ZIP文档 ZIP文档(通常)以压缩格式存储了一个或多个文件,每个ZIP文档都有一个包含诸如文件 名字和所使用的压缩方法等信息的头.在Java中,可以 ...

  8. QQ左侧滑动显示

    对于新版的QQ界面,左侧增加了一个滑动效果,相信小伙伴们早已按耐不住激动的心情,这种效果是如何实现的呢?本篇我们就一起来探讨一二.既然是滑动效果这里就要使用到HorizontalScrollView类 ...

  9. JavaScript的学习--生成二维码

    有一些耗cpu的计算,完全可以在客户端上计算,比如生成二维码. qrcode其实是通过计算,然后使用jquery实现图形渲染和画图.支持canvas和table两种方式生成我们所需的二维码. 具体用法 ...

  10. C++笔记(3)：一些C++的基础知识点

     前言: 找工作需要,最近看了下一些C++的基本概念,为范磊的<零起点学通C++>,以下是一些笔记. 内容: delete p;只是删除指针p指向内存区,并不是删除指针p,所以p还是可以用 ...