反色处理写的比较简单,灰色处理写了一些注释

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

</head>

<body>

<canvas id="board" width="1000" height="1000" style="background: lightgrey;"></canvas>

</body>

</html>

<script type="text/javascript">

var board = document.getElementById("board");

var context = board.getContext("2d");

//图像处理必须运行在服务器环境

var aImg = new Image();

aImg.src = "img/7.jpg";

context.beginPath();

aImg.onload = function(){

//绘制一张图片到 canvas 画布

//三个参数分别为 图片对象 画布位置(X轴 Y轴)

context.drawImage(aImg,10,10);

//getimageData--获取图片指定区域的像素

var imageDatas = context.getImageData(10,10,aImg.width,aImg.height);

//一个像素点需要用四个信息值去描述

// r g b a (颜色和透明度)

var dataArray = imageDatas.data;

//数组每四个元素代表一个像素的信息

for (var i = 0 ; i < dataArray.length ; i += 4) {

var r = dataArray[i];

var g = dataArray[i+1];

var b = dataArray[i+2];

//当 r = g = b 时会变成灰色(除了 0 0 0 和 255 255 255)

//取平均值

var result = parseInt((r + g + b) / 3);

dataArray[i] = result;

dataArray[i + 1] = result;

dataArray[i + 2] = result;

}

//根据像素点 去绘制图片

context.putImageData(imageDatas,150,150);

}

</script>

canvas简单图片处理(灰色处理)的更多相关文章

  1. 使用canvas进行图片裁剪简单功能

    1.html部分 使用一个input[type="file"]进行图片上传: canvas进行图片的裁剪展示 <div> <input type="fi ...

  2. 用canvas实现图片滤镜效果详解之灰度效果

    前面展示了一些canvas实现图片滤镜效果的展示,并且给出了相应的算法,下面来介绍一下具体的实现方法. 前面介绍的特效中灰度效果最简单,就从这里开始介绍吧. 1.获取图像数据 img.src = ’h ...

  3. canvas和图片之间的互相装换

    canvas和图片之间的互相装换 一.总结 一句话总结:一个是canvas的drawImage方法,一个是canvas的toDataURL方法 canvas drawImage() Image对象 c ...

  4. canvas压缩图片变模糊问题

    canvas 画图图片变模糊问题 问题描述 在使用 canvas 对图片进行编辑导出图片之后发现图片和原图相比变得模糊了 canvas 画图线条变粗 问题产生原因 该问题在 PC 下面并不会产生,原因 ...

  5. 神奇的canvas——巧用 canvas 为图片添加水印

    代码地址如下:http://www.demodashi.com/demo/11637.html 很久之前写过一篇关于 canvas 的文章,是通过 canvas 来实现一个绚丽的动画效果,不管看过没看 ...

  6. 赵雅智_运用Bitmap和Canvas实现图片显示，缩小，旋转，水印

    上一篇已经介绍了Android种Bitmap和Canvas的使用,以下我们来写一个详细实例 http://blog.csdn.net/zhaoyazhi2129/article/details/321 ...

  7. HTML5 file API加canvas实现图片前端JS压缩并上传

    一.图片上传前端压缩的现实意义 对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅 ...

  8. js简单 图片版时钟，带翻转效果

    js简单 图片版时钟,带翻转效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  9. canvas学习笔记：canvas对图片的像素级处理--ImageData的应用

    学习了canvas的基本绘图功能后,惊喜的发现canvas对图片数据也有相当强大的处理功能,能够从像素级别操作位图,当然[lte ie8]不支持. 主要的函数有三个: ctx.createImageD ...

随机推荐

  1. Spring映射器、适配器、解析器

    1 springmvc的映射器和适配器 1.1springmvc的映射器 根据客户端请求的url,找到处理本次请求的handler(处理器),将url和controller关联起来 1.2spring ...

  2. MediaElement.js对不同浏览器的支持

    目前已经有很多html5播放器可以使用,使用html5播放器可以轻松的在页面中插入媒体视频,从而使我们的web页面变得更加丰富多彩,所以今天向大家推荐一款非常优秀的html5播放器MediaEleme ...

  3. Lamp和Lnmp环境搭建

    一.安装Lamp wget -c http://soft.vpser.net/lnmp/lnmp1.2-full.tar.gz && tar zxf lnmp1.2-full.tar. ...

  4. 【leetcode】Maximum Subarray (53)

    1.   Maximum Subarray (#53) Find the contiguous subarray within an array (containing at least one nu ...

  5. 朴素贝叶斯算法的python实现

    朴素贝叶斯 算法优缺点 优点:在数据较少的情况下依然有效,可以处理多类别问题 缺点:对输入数据的准备方式敏感 适用数据类型:标称型数据 算法思想: 朴素贝叶斯比如我们想判断一个邮件是不是垃圾邮件,那么 ...

  6. c++2008 并行配置文件和获取字典的所有key的方法

    1 需要 在官网 下载对应的执行包... 2, # !/usr/bin/python3.4 # -*- coding: utf-8 -*- b = { 'video':0, 'music':23 } ...

  7. 试听笔记：javascript入门精通

    一.数据类型 1.原始类型:number.string.boolean.null.undefined 2.对象类型:Object (Function.Array.Date...) P.类型隐式转换:' ...

  8. 198个经典C#WinForm实例源码(超赞) 里面的例子 .sln 目录

    \-窗体技巧\QQ窗体\QQFrm.sln; \-窗体技巧\仿XP系统的任务栏菜单\仿XP系统的任务栏菜单.sln; \-窗体技巧\向窗体中拖放图片并显示\向窗体中拖放图片并显示.sln; \-窗体技 ...

  9. Linux 查杀病毒的常见命令

    1. 查看异常连接的网络端口及其对应的相应的进程 netstat -anlp | grep EST 2.看下相关的进程ID对应的可执行文件的位置 ps 2393 可以看到进程的可执行文件在哪? 3.临 ...

  10. Fouandation（NSString ,NSArray,NSDictionary,NSSet） 中常见的理解错误区

    Fouandation 中常见的理解错误区 1.NSString //快速创建(实例和类方法) 存放的地址是 常量区 NSString * string1 = [NSString alloc]init ...