使用<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. C#设计模式-单例模式

    单例模式三种写法: 第一种最简单,但没有考虑线程安全,在多线程时可能会出问题…… public class Singleton { private static Singleton _instance ...

  2. silverlight MouseLeftButtonDown事件总是无法触发

    参考解决办法:http://www.cnblogs.com/tianguook/archive/2011/05/13/2045299.html 在构造函数中首先添加一个事件: public BtnLi ...

  3. Oracle 11g系列：函数与存储过程

    1.函数 Oracle中的函数分为两类:系统函数和自定义行数.对于自定义函数,函数的传入参数可以没有,如果有,一定要明确其数据类型.函数传入参数不能在函数内部进行修改.函数必须有返回值,并且返回值必须 ...

  4. Topology and Geometry in OpenCascade-Face

    Topology and Geometry in OpenCascade-Face eryar@163.com 摘要Abstract:本文简要介绍了几何造型中的边界表示法(BRep),并结合程序说明O ...

  5. WPF自定义控件与样式(10)-进度控件ProcessBar自定义样

    一．前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: Pro ...

  6. PHP内核(一)内存管理

    本文链接:http://www.orlion.ml/tag/php-internal/ 一.内存管理基础 用c语言开发时,开发者要手动进行内存管理.PHP经常作为web服务器的模块,内存管理与预防内存 ...

  7. Javaweb -- ServletContextListener

    当启动web应用后端服务时,有时需要预先从数据库或者配置文件等读取信息来配置一些全局变量之类的 这时可以用ServletContextListener,在启动服务时,加载设置基本配置 实现如下: (1 ...

  8. PHP的学习--生成器Generators

    生成器总览 (PHP 5 >= 5.5.0, PHP 7) 生成器提供了一种更容易的方法来实现简单的对象迭代,相比较定义类实现 Iterator 接口的方式,性能开销和复杂性大大降低. 生成器允 ...

  9. 云计算之路-阿里云上：消灭“黑色n秒”第三招——禁用网卡的TCP/IP Offload

    程咬金有三板斧,我们有三招.在这篇博文中我们要出第三招,同时也意味着昨天在“希望的田野”上的第二招失败了. 前两招打头(CPU)不凑效,这一招要换一个部位,但依然要坚持攻击敌人最弱(最忙最累)部位的原 ...

  10. Hadoop阅读笔记（一）——强大的MapReduce

    前言:来园子已经有8个月了,当初入园凭着满腔热血和一脑门子冲动,给自己起了个响亮的旗号“大数据 小世界”,顿时有了种世界都是我的,世界都在我手中的赶脚.可是......时光飞逝,岁月如梭~~~随手一翻 ...