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

<!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. C#导出涉及行列合并的复杂的Excel数据

    一.导出数据格式 二.实现代码 /// <summary> /// 导出经费统计excel表格 /// </summary> /// <param name=" ...

  2. android 图片缓存

    一.Picasso https://github.com/square/picasso Picasso是Square公司开源的一个Android平台上的图片加载框架,简单易用,一句话搞定项目中的图片加 ...

  3. libqrencode生成二维码

    在生成二维码的库中QREncoder最为常见,但是由于中文字符的特殊性,生成中文的时候会出现一定的错误,所以博主改用libqrencode,是一个纯C编写的类库,支持面也更广泛. ① 下载libqre ...

  4. php面试题2

    php面试题及答案(原创)收藏 基础题: 1.表单中 get与post提交方法的区别? 答:get是发送请求HTTP协议通过url参数传递进行接收,而post是实体数据,可以通过表单提交大量信息. 2 ...

  5. js生成带参的二维码

    最近项目中有需求生成带参的二维码,考虑过用JAVA后台生成返回前端展示,后面了解到用jquery的qrcode.js插件可以很好现实 引入js: require.config({ baseUrl : ...

  6. MIT 6.828 JOS学习笔记5. Exercise 1.3

    Lab 1 Exercise 3 设置一个断点在地址0x7c00处,这是boot sector被加载的位置.然后让程序继续运行直到这个断点.跟踪/boot/boot.S文件的每一条指令,同时使用boo ...

  7. 纯CSS实现二级下拉导航菜单

    这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8.火狐等都支持,而且它还是学习CSS菜单编写的典型教程,让你学会很多CSS技巧. 运行效果截图如下: < ...

  8. Android常用元件

    本文来源于 http://blog.csdn.net/wxhlinux/article/details/8601170#comments 1.4  Android應用程式元件1.4.1  Activi ...

  9. Codeforces 307 div2 E.GukiZ and GukiZiana 分块

    time limit per test 10 seconds memory limit per test 256 megabytes input standard input output stand ...

  10. jenkins和hudson---打酱油的日子

    自动化构建:Jenkins起源于Hudson.Hudson在商业软件的路上继续前行,而Jenkins则作为开源软件,从hudson分支出来. 因此现在的jenkins和hudson非常类似,但是随着二 ...