使用<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. Linux初学 - 文件夹及文件操作

    创建文件夹 mkdir 移动文件夹 mv dir1 dir2 复制文件夹 cp 删除文件夹 rm 创建文件 touch 编辑文件内容 vi /vim 查看文件内容 cat 追加文件内容 echo 复制 ...

  2. 使用System.Drawing.Imaging.dll进行图片的合并

    在最近开发项目的时候有时候需要进行图片的合并,即将两张图片合并成功一张图片 合并图片的代码: #region 两张图片的合并 /// <summary > /// 将Image对象转化成二 ...

  3. vuejs与服务器通信

    vuejs与服务器通信 与服务器通信 Vue 实例的原始数据 $data 能直接用 JSON.stringify() 序列化.社区贡献了一个插件 vue-resource,提供一种容易的方式与 RES ...

  4. TSQL HASHBYTES 用法

    HashBytes 使用Hash 算法,能够产生高质量的Hash值,大幅度提高识别数据相异的准确性,但是HashBytes函数无法提供100%的准确度,如果业务逻辑要求不允许有误差,那么不要使用任何H ...

  5. ASP.NET MVC删除数据

    Index.cshtml @model IEnumerable<MvcExample.Models.Category> <script type="text/javascr ...

  6. Android开发之时间日期1

     对于手机的时间日期设置估计大家一定都不陌生吧,今天做了一个关于时间日期设置的小例子,其中遇到一个问题,求指导,如何使设置的时间日期和手机系统同步?还望高手指点一二. 先不说这个了,分享一下我的小例子 ...

  7. maven -- 学习笔记（四）实现在Eclipse用maven搭建springmvc项目（附构建步骤和详细实现代码）

    Learn from:http://www.cnblogs.com/fangjins/archive/2012/05/06/2485459.html,感谢楼主的分享,才有下面的这篇学习小结 一.环境准 ...

  8. Yii2的深入学习--自动加载机制

    Yii2 的自动加载分两部分,一部分是 Composer 的自动加载机制,另一部分是 Yii2 框架自身的自动加载机制. Composer自动加载 对于库的自动加载信息,Composer 生成了一个  ...

  9. WordPress主题模板层次和常用模板函数

    首页: home.php index.php 文章页: single-{post_type}.php – 如果文章类型是videos(即视频),WordPress就会去查找single-videos. ...

  10. OpenStack虚拟云桌面在携程呼叫中心的应用

    编者:本文为刘科在第六期[携程技术微分享]中的分享内容.在携程技术中心(微信号ctriptech)微信后台回复[云桌面],可加入微信交流群,和关注云桌面的小伙伴一起玩耍~ 刘科,携程系统研发云平台桌面 ...