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

<!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. ABAP 合并单元格自建函数

    FORM frm_merge_cells USING sor_cell tar_cell.   CALL METHOD OF excel 'Range' = range     EXPORTING   ...

  2. macbook air 开机黑屏解决方法

    故障现象:1. 开机有声音2. 背面logo亮灯3. 键盘背光灯不亮4. 大写锁定键按下不亮5. 屏幕黑屏,无苹果logo 解决:重置PRAM后成功开机. 1. 关闭 Mac.2. 在键盘上找到以下按 ...

  3. .NET 清理非托管资源

    Dispose 类型的 Dispose 方法应释放它拥有的所有资源.它还应该通过调用其父类型的 Dispose 方法释放其基类型拥有的所有资源.该父类型的 Dispose 方法应该释放它拥有的所有资源 ...

  4. python3安装

    yum install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel readline-devel tk-devel ...

  5. bzoj3439 trie+可持久化线段树

    挺好想的 trie建树后,按dfn序建可持久化 注意:计数变量多的题目一定要注意检查会不会用的时候搞混了 #include <cstdio> #include <cstdlib> ...

  6. Jquery表单提交后获取返回Json值

    1.给form添加id值: <form action="/News/SaveMessage" method="post" accept-charset=& ...

  7. ios 添加伪闪屏

    self.window.rootViewController.view.alpha = ; UIImageView *splashImageView = [[UIImageView alloc]ini ...

  8. iOS-OC-基本控件之UIPageControl

    UIPageControl(页面控制器,就是桌面的那些小点点,每个点代表一个界面) 父类是 UIControl. iOS开发中常用的基本控件,主要和UIScrollView一起使用,比较常用的就是有些 ...

  9. 【Java EE 学习 28 上】【oracle学习第二天】【子查询】【集合运算】【几种数据库对象】

    一.子查询 1.为什么要使用子查询:问题不能一步求解或者一个查询不能通过一步查询得到. 2.分类:单行子查询和多行子查询. 3.子查询的本质:一个查询中包含了另外一个或者多个查询. 4.使用子查询的规 ...

  10. 微信扫描打开APP下载链接提示代码优化(转)

    上一次我发了一篇文章叫“微信打开网址添加在浏览器中打开提示”,里面我发出来了三个代码,分别是纯JS.js+html.jQuery+HTML代码.今天来一个简化版带可以关闭的按钮操作.使用的是纯JS+H ...