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

<!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. CodeViz代码可视化

    安装可以参见,http://blogimg.chinaunix.net/blog/upfile2/091119203927.pdf 结合pdf教程,这里说下注意事项: 1 ) 必须先安装GRAPHVI ...

  2. poj2236_并查集_Wireless Network

    Wireless Network Time Limit: 10000MS   Memory Limit: 65536K Total Submissions: 24497   Accepted: 102 ...

  3. js 中 Math对象

    Math 对象是一个固有的对象,无需创建它,直接把 Math 作为对象使用就可以调用其所有属性和方法.这是它与Date,String对象的区别. Math 对象属性 Math 对象方法

  4. PHP 函数(数组字符串)

    函数四要素:  参数  变量   返回值  函数体 函数分类: 1.有参数的函数: function Show() { echo "hello"; } Show(); 2. 有返回 ...

  5. 页面位置 top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHe

    1.top 此属性仅仅在对象的定位(position)属性被设置时可用.否则,此属性设置会被忽略. 代码如下: <div style=" position:absolute; widt ...

  6. Caffe初试（二）windows下的cafee训练和测试mnist数据集

    一.mnist数据集 mnist是一个手写数字数据库,由Google实验室的Corinna Cortes和纽约大学柯朗研究院的Yann LeCun等人建立,它有60000个训练样本集和10000个测试 ...

  7. PHP字符串函数

    php字符串处理函数大全 addcslashes — 为字符串里面的部分字符添加反斜线转义字符addslashes — 用指定的方式对字符串里面的字符进行转义bin2hex — 将二进制数据转换成十六 ...

  8. 朋友圈常见单页面触屏滑动上下翻屏功能jQuery实现

    翻页插件:实现原理,用margin-top来控制页面容器位置来实现上下翻页.margin这属性很好用,可以用来制作侧栏动画滑出菜单(左菜单,右内容,控制两者的margin实现):或者head下滑菜单 ...

  9. 2016-2017 ACM-ICPC, NEERC, Moscow Subregional Contest

    A. Altitude 从小到大加入每个数,用set查找前驱和后继即可. 时间复杂度$O(n\log n)$. #include <bits/stdc++.h> using namespa ...

  10. 在Lingo中输入矩阵（通过Excel）

    举例说明:我要将'C:\Users\Lenovo\Desktop\lingodata.xlsx'里的数据导入lingo1.左键拖动选中'C:\Users\Lenovo\Desktop\lingodat ...