使用<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. AngularJS中Directive指令系列 - scope属性的使用

    文章是转的,我做下补充.原文地址:https://segmentfault.com/a/1190000002773689 每当一个指令被创建的时候,都会有这样一个选择,是继承自己的父作用域(一般是外部 ...

  2. MemCached add命令的用法详解

    增加: add 往内存增加一条数据 命令格式: add key flag expiretime bytes\r\n data\r\n //跨行所加的一些数据 1)key: 给这个值起一个固定的名字 / ...

  3. 网站CSS写在html里面的好处

    这是应付超大流量的一种优化方案.为提高速度,他们的外部连接文件一般都存储在单独的服务器上,例如img.****.com,如果这个服务器挂掉 ,整个首页就挂掉了.放在页面内,比较安全.用户访问页面时,不 ...

  4. js对象私有变量公有变量问题

    0 js对象私有变量公有变量问题5 小弟初学JS面向对象编程 现有一问题 请教各位大虾: Person=function (){ //私有变量定义 var name; vae age; var Ale ...

  5. Orlion个人博客 | 全栈工程师之路-www.orlion.ga

    自己用wordpress+bootstrap搭建了一个博客,网址http://www.orlion.ga,用来记录博主学习和成长,主要关注JAVA.LANMP.前端与客户端(Android).算法与数 ...

  6. RAC Concept

    1. RAC的高可用性 RAC的高可用性主要包含以下几点: 1> 实现节点间的负载均衡. 2> 实现失败切换的功能. 3> 通过Service组件来控制客户端的访问路径. 4> ...

  7. PHP的学习--cookie和session

    最近读了一点<PHP核心技术与最佳实践>,看了cookie和session,有所收获,结合之前的认识参考了几篇博客,总结一下-- 1. PHP的COOKIE cookie 是一种在远程浏览 ...

  8. Windows 8（虚拟机环境）安装.NET Framework3.5(includes .NET 2.0 and 3.0)

    按照这篇文章:http://blogs.technet.com/b/aviraj/archive/2012/08/04/windows-8-enable-net-framework-3-5-inclu ...

  9. 学习使用 jQuery & CSS3 制作照片堆栈效果

    在这个小实验中,我们使用 jQuery & CSS3 创建了一个交互式的照片堆栈效果.提供了一些模拟现实的互动的可能性给用户.这个想法的思路是:有一些照片在桌面上可以拖放一样,堆放和删除,每个 ...

  10. GIF录制神器GifCam

    前几天偶然看到一款神器:GifCam! GifCam是什么? 一款录制gif动画图片的小软件,小到不足一兆. 使用方法(简单到不可思议) 百度 GifCam 下载: 不用安装,直接打开gifcam: ...