代码实例：

<!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. Fiddler抓包工具-拦截，断点

    1.拦截网页 先拦截请求-F11设置拦截 -F12抓包 2.修改金额 宽带 下行:100M上行:8M 一般家用的都是下行高,企业用都是上下行对等.企业要搭建网站就需要上行. 我们去访问网站,服务器根据 ...

  2. 每天一个Linux指令

    开始详细系统的学习linux常用命令,坚持每天一个命令,所以这个系列为每天一个linux命令.学习的主要参考资料为: 1.<鸟哥的linux私房菜> 2.http://codingstan ...

  3. 432D Prefixes and Suffixes

    题目大意 给你一个串 对于一个子串如果它既是前缀又是后缀 输出它的长度以及它在原串中一共出现了多少次 分析 对于既是前缀又是后缀的判断和126B相同 然后我们只需要记录每个不同的z[i]出现了多少次 ...

  4. 'utf-8-sig api_res = r.data.decode('utf-8') json_ = json.loads(api_res)

    东莞市 东莞城市标志 东莞城市标志 1985年,广东省东莞县经国务院批准列为珠江三角洲经济开发区,同年9月撤消东莞县,建立(县级)东莞市,1988年1月升格为地级市.东莞市是全国五个不设市辖区的地级市 ...

  5. Linux学习篇（四）-Linux 文件管理命令详解

    rootfs:根文件系统,Root FileSystem 的简称. Linux 文件命名规则 长度不超过255个字符. 不能使用/当文件名. 严格区分大小写. Linux 目录简介 / 根目录 /bo ...

  6. NuGet-Doc：NuGet.Server

    ylbtech-NuGet-Doc:NuGet.Server 1.返回顶部 1. NuGet.Server 2018/03/13 NuGet.Server 是由 .NET Foundation 提供的 ...

  7. 135、TensorFlow SavedModel工具类的使用

    # SavedModelBuilder 类提供了保存多个MetaGraphDef的功能 # MetaGraph是一个数据流图,加上它的关联变量,资产和标签 # 一个MetaGraphDef是一个协议缓 ...

  8. 批量执行SQL脚本

    新建文件夹all_sql,并将需要执行的sql脚本放入其中. 新建bat脚本,执行即可,ORACLE 也可改Mysql,按需:如下 ::echo off :: @echo off echo 开始执行数 ...

  9. WEB开发：Java与Php对比

    比较PHP和JSP这两个Web开发技术,在目前的情况是其实是比较PHP和Java的Web开发.以下是我就几个主要方面进行比较: 一. 语言比较 PHP是解释执行的服务器脚本语言,首先php有简单容易上 ...

  10. kali 开启xdebug

    1.安装xdebug 参考https://xdebug.org/docs/install 2.配置 # vi /etc/php/7.3/mods-available/xdebug.inizend_ex ...