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

<!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. Python: zip函数

    zip函数接受任意多个(包括0个和1个)序列作为参数,返回一个tuple列表. 参考链接解释

  2. iOS之自定义控件

    一.使用纯代码方式 initWithFrame:中添加子控件 layoutSubViews中设置子控件的fame 对外设置数据接口,重写setter方法给子控件设置数据显示 在的viewControl ...

  3. MongoDB游标操作（4）

    游标是什么? 通俗的说,游标不是查询结果,而是查询的返回资源,或者接口. 通过这个接口,你可以逐条读取. 声明游标: var cursor =  db.collectioName.find(query ...

  4. 无废话ExtJs 入门教程十九[API的使用]

    无废话ExtJs 入门教程十九[API的使用] extjs技术交流,欢迎加群(201926085) 首先解释什么是 API 来自百度百科的官方解释:API(Application Programmin ...

  5. Inno Setup 版本 5.5.3+ 简体中文语言包

    ; *** Inno Setup 版本 + 简体中文消息 *** [LangOptions] LanguageName=<7B80><4F53><> Languag ...

  6. WebForm控件Repeater

    我们会发现用拼接字符串来显示一个查询非常的麻烦,有一个控件Repeater帮助你,省去写Foreach LinQ to SQL类 函数类: using System; using System.Col ...

  7. Node.js-视图引擎【1】-Swig集成express的安装与配置

    node.js视图引擎,选来选去发现Swig最符合我的胃口哈哈. 一.安装Swig视图引擎 npm install -g swig 二.在node.js代码中配置如下 var app = requir ...

  8. Maven 的插件和生命周期的绑定

    一.Maven 的生命周期 Maven 的生命周期是对所有的构建过程进行抽象和统一.Maven 的生命周期是抽象的,这意味着生命周期本身不做任何实际的工作,生命周期只是定义了一系列的阶段,并确定这些阶 ...

  9. 【JAVA】 UIMnager

    Java'中的几种Look and Feel 1.Metal风格 (默认) String lookAndFeel = "javax.swing.plaf.metal.MetalLookAnd ...

  10. 2016 ECJTU - STL

    1.ECJTU-STL重挂 STL 2.总结:学长出的题,本来还想ak的,结果又被虐了... 3.标程和数据:http://pan.baidu.com/s/1qYzXY2K 01    水 02  水 ...