代码实例：

<!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. ward's method分层聚类凝聚法

    ward's method是分层聚类凝聚法的一种常见的度量cluster之间距离的方法,其基本过程是这样的(参考:http://blog.sciencenet.cn/blog-2827057-9217 ...

  2. 整合ssm三大框架使用注解开发查询用户信息

    整合ssm三大框架使用注解开发查询用户信息 一.基础知识准备之spring mvc工作原理 二.分析 第一步:发起请求到前端控制器(DispatcherServlet) 第二步:前端控制器请求Hand ...

  3. OSI参考模型和网络排错

     OSI七层协议 应用层  应用程序通信服务 表示层  显示  加密  数据格式 会话层   服务器和客户机建立会话  netstat -nb 查看会话   mscofig 传输层 可靠回话传输 分段 ...

  4. React准备工作

    一.环境准备 使用react官方推荐的脚手架create-react-app 1.安装nodejs 2.npm install -g create-react-app  //全局安装脚手架 3.cre ...

  5. （转）linux 命令访问url： curl http://www.baidu.com/index.html

    转:https://blog.csdn.net/michael1112/article/details/79119424 1.elinks - lynx-like替代角色模式WWW的浏览器 例如: e ...

  6. CAS 认证

    Central Authentication Service http session 保持机制 1.  用户向服务端发送密码,服务端生成与用户对应的 sessionid 2. 服务端将这个 sess ...

  7. 为什么从pycharm中打开的html文件会显示404?

    问题如图: 解决办法: 某次发现运行导入的html文件的时候,打开浏览器会报404错误:而运行自己写的html文件则正常显示:最后发现这是pycharm缓存问题,只需重启pycharm清除缓存就ok啦 ...

  8. DJango安装-windows

    1.进入虚拟环境后启动 activate 2.查看当前虚拟环境是否存在Django环境 pip list 3.不存在则 安装Django环境 pip install django 4.查看Django ...

  9. Songwriter CF1252-E(贪心)

    题意: 已知一个序列a,问能否将a映射到序列b,使得相邻元素之间的大小关系不变(三种),且相邻元素不能相差超过k,且每个元素范围在[L,R]内.如果能,求字典序最小的b. 思路: 可以设b[1]的范围 ...

  10. 爬虫（十一）—— 请求库（三）pypeteer请求库

    曾经使用模拟浏览器操作(selenium + webdriver)来写爬虫,但是稍微有点反爬的网站都会对selenium和webdriver进行识别,网站只需要在前端js添加一下判断脚本,很容易就可以 ...