代码实例：

<!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. 2017 ICPC HongKong B:Black and White（扫描线+线段树）

    题目描述 Consider a square map with N × N cells. We indicate the coordinate of a cell by (i, j), where 1 ...

  2. Django 基础笔记补充

    1.目录文件 django-admin.py startproject mydj cd mydj python manage.py startapp myapp   后生成目录: mydj/ ├── ...

  3. Oracle数据库字符集问题

    Oracle数据库的字符集问题,也涉及作为服务器操作系统的CentOS或者Windows的字符集与Oracle字符集之间的关联关系Oracle的字符集,这个问题的提出是因为两个原因:一是遇到一个DMP ...

  4. hook原生打包流程

    将实际执行的Transform换成了MatrixTraceTransform public static void inject(Project project, def variant) { //获 ...

  5. 多个springboot项目部署到tomcat，Error deploying web application archive

    每个springboot单独部署到tomcat下可以正常启动,多个一个就发生异常 Error deploying web application archive 解决:配置文件加上配置区分 sprin ...

  6. 测开之路六十二：接口测试平台之公共的js、html、平台入口

    common.js //定义后台的host和端口var host = 'http://192.168.xxx.1:8000'; //'http://127.0.0.1:8000'; //用于发送htt ...

  7. Linux运维工程师前景

    什么是Linux运维 如果我们是一辆高速行驶在高速公路上的汽车,那运维工程师就是司机兼维修工,这个司机可不简单,有时需要在高速行驶过程中更换轮胎.并根据道路情况换档位.当汽车速度越来越快时,汽车本身不 ...

  8. postgresql中实现按周统计详解

    SELECT EXTRACT(DOW FROM CURRENT_DATE);   执行结果如下. 这个SQL语句的意思就是计算当前日期是一周中的第几天. EXTRACT(DOW FROM CURREN ...

  9. 【ABAP系列】SAP ABAP实现LOG显示的方法

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP实现LOG显示的 ...

  10. sql 为什么要用where 1=1？

    之前一直不太明白,sql语句里为什么要写where 1=1 提升某种执行效率? 其实,1=1 是永恒成立的,意思无条件的,也就是说在SQL语句中有没有这个1=1都可以. 这个1=1常用于应用程序根据用 ...