代码实例：

<!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. Jenkins slave-agent.jnlp 无法安装为服务（install as a service）

    问题: 在部署持续集成环境,配置slave节点时遇到一个问题,slave-agent.jnlp可以正常启动运行(不能正常启动的点这里) 但是在保存为系统服务时,slave-agent.jnlp点击[i ...

  2. 20180711-Java Number类

    下面是一个装箱与拆箱的例子: public class Test{ public static void main(String args[]){ Integer x = 5; // boxes in ...

  3. eclipse 启动 tomcat 报错：Server mylocalhost was unable to start within 45 seconds

    这个专门转载一篇博文也是为了讽刺一下自己二逼的程序员职业,哈哈. eclipse启动tomcat服务器报错:Server mylocalhost was unable to start within ...

  4. composer proc_open(): fork failed – Cannot allocate memory

    一般小的VPS 才1G内存,如果使用composer会提示内存不足的现象 解决办法,可以使用交换内存 直接命令 /bin/dd if=/dev/zero of=/var/swap.1 bs=1M co ...

  5. 123、TensorFlow的Job

    # 如果你在分布式环境中部署TensorFlow # 你或许需要指定job name和task ID # 来将变量放置在参数服务器上 # 将操作放在worker job import tensorfl ...

  6. 测开之路六十：接口测试平台之common目录

    实现接口测试平台使用jsonpath进行取值来断言,效果: 访问页面: 调试功能:http://www.kuaidi100.com/query 保存功能 触发执行功能 查看报告功能 目录结构 comm ...

  7. PTA 1155 Heap Paths (DFS)

    题目链接:1155 Heap Paths (30 分) In computer science, a heap is a specialized tree-based data structure t ...

  8. 5期-Metasploitable3专题课程

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

  9. 公司C++规范学习

    目录 公司C++规范学习 语法部分 风格/约定 公司C++规范学习 语法部分 class和struct关键字的选择:class表示被封装的用户自定义类型,不公开定义非静态数据成员,struct表示数据 ...

  10. 1、Laravel 环境配置及安装

    一.开发工具及环境 PHPStorm + phpStudy 最新版 Composer 安装 https://www.phpcomposer.com/ 下载就可以,设置中国镜像 安装完成后 compos ...