代码实例：

<!DOCTYPE html>

<html>

	<head>

		<style>

		canvas{

		background:#eee;

		}

		</style>

		<title>实例</title>

		<meta charset="utf-8">

		<link rel="stylesheet" href="">

		<script>

			window.onload=function  () {

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

                var ctx = canvas.getContext("2d");

                //绘制图片

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

                ctx.drawImage(img,0,0,200,200);

                var imgData=ctx.getImageData(0,0,200,200);

                ctx.putImageData(draw(imgData),200,200);

               //方法：反色

               function draw(imgData){

                   for (var i=0;i<imgData.width*imgData.height;i++) {

                       imgData.data[i*4+0]=255-imgData.data[i*4+0];

                       imgData.data[i*4+1]=255-imgData.data[i*4+1];

                       imgData.data[i*4+2]=255-imgData.data[i*4+2];

                       imgData.data[i*4+3]=imgData.data[i*4+3];

                   }

                   return imgData;

               }

            }

		</script>x

	</head>

	<body>

		<canvas id="canvas" width=500 height=500>

		</canvas>

	    <img src="不二2.jpg" id="img" hidden>

	</body>

</html>

　　图片：

效果：

2017-09-12  11:12:31

canvas 操作像素 反相的更多相关文章

  1. 使用Canvas操作像素

    现代浏览器支持通过<video>元素播放视频.大多数浏览器也可以通过MediaDevices.getUserMedia() API访问摄像头.但即使这两件事结合起来,我们也无法直接访问和操 ...

  2. canvas 操作像素 窗帘效果

    代码实例: <!DOCTYPE html> <html> <head> <style> canvas{ background:#eee; } </ ...

  3. 学习Opencv 2.4.9（二） ---操作像素

    作者:咕唧咕唧liukun321 来自:http://blog.csdn.net/liukun321 本质上说一张图像就是由数值组成的矩阵.Opencv 2.x由 cv::Mat 这个数据结构来表示一 ...

  4. OpenCV坐标系与操作像素的四种方法

    像素是图像的基本组成单位,熟悉了如何操作像素,就能更好的理解对图像的各种处理变换的实现方式了. 1.at方法 第一种操作像素的方法是使用"at",如一幅3通道的彩色图像image的 ...

  5. canvas操作图片，进行面板画图，旋转等

    HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript). 不过,<canvas> 元素本身并没有绘制能力(它仅仅是图形的容器) - 您必须使用 ...

  6. OpenCV2计算机编程手册（一）操作像素

    1. 引言 从根本上来说,一张图像是一个由数值组成的矩阵.这也是opencv中使用 代表黑色,代表白色.对于彩色图像(BGR三通道)而言,每个像素需要三个这样的8位无符号数来表示,这种情况下,矩阵的元 ...

  7. 【Direct2D开发】 通过操作像素实现纹理混合

    转载请注明出处:http://www.cnblogs.com/Ray1024 一.概述 我们都知道Direct2D可以加载并显示图片,但是不知道你有没有想过,这个2D的图形引擎可以进行纹理混合吗?如果 ...

  8. OpenCV操作像素

    在了解了图像的基础知识和OpenCV的基础知识和操作以后,接下来我们要做的就对像素进行操作,我们知道了图像的本质就是一个矩阵,那么一个矩阵中存储了那么多的像素,我们如何来操作呢?下面通过几个例子来看看 ...

  9. angular使用canvas操作时报错

    最近,用 angular 前端框架为应用登录新增图形验证码认证,由于没有现成的插件,于是便使用canvas+js操作,也是可以正常使用,但是在编译阶段却有个报错: ERROR in src/app/l ...

随机推荐

  1. visual studio 编译报错：未能向文件“....csproj.FileListAbsolute.txt”写入命令行,对路径的访问被拒绝

    在网上开始查找出错的解决方法,终于找到了,原来解决方法这么简单,当初以为是权限的问题,后来发现不是权限问题,在VSS中比以前多了两个目录“bin”和“obj”,可能是有人上传的时候将这两个文件夹一起上 ...

  2. luogu P1449 后缀表达式 x

    题目描述 所谓后缀表达式是指这样的一个表达式:式中不再引用括号,运算符号放在两个运算对象之后,所有计算按运算符号出现的顺序,严格地由左而右新进行(不用考虑运算符的优先级). 如:3*(5–2)+7对应 ...

  3. Oracle中start with...connect by/start with…connect by prior子句的用法

    connect by 是结构化查询中用到的,其基本语法是:select … from tablenamestart with 条件1connect by 条件2where 条件3;例:select * ...

  4. eclipse中maven工程添加本地库至Maven Dependencies

    1.WEB-INF文件夹下添加lib文件夹,文件夹下添加demo-client-0.1-SNAPSHOT.jar 2.pom.xml中配置如下代码: <dependency> <gr ...

  5. linux 统计代码行数

    列出目录下所有文件(仅有文件名):ls -laR 列出目录下所有文件名称find . * 统计当前目录下全部代码行数find . * | xargs wc -l 统计当前目录下java文件行数,去除空 ...

  6. 【ABAP系列】SAP ABAP基础-SQL的嵌套使用

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP基础-SQL的嵌 ...

  7. 5期-Metasploitable3专题课程

    metasploitable2基于ubantu的渗透演练环境.Rapid7官方长时间未更新,导致跟不上当前的节奏.metasploitable3出世. metasploitable2配合metaspl ...

  8. onblur和onkeyup事件

    onblur:事件会在对象失去焦点时发生 提示:onblur 相反事件为onfocus事件 . onkeyup: 事件会在键盘按键被松开时发生. 提示:与onkeyup 事件相关的事件发生次序: on ...

  9. JSP基础--会话跟踪技术、cookie、session

    会话跟踪技术 1 什么是会话跟踪技术 我们需要先了解一下什么是会话!可以把会话理解为客户端与服务器之间的一次会晤,在一次会晤中可能会包含多次请求和响应.例如你给10086打个电话,你就是客户端,而10 ...

  10. oracle三大范式

    范式: 设计数据库定义的一个规则, 三大范式, 灵活运用, 人的思想是活的 一范式 1, 不存在冗余数据 同一个表中的记录不能有重复----所以主键(必须有) 2, 每个字段必须是不可再分的信息(列不 ...