代码实例：

<!DOCTYPE HTML>

<html>

<head>

    <meta charset="utf-8">

    <title>图片反色</title>

    <style type="text/css">

        body{ background:black;}

        #c1{ background:white;}

    </style>

    <script type="text/javascript">

        window.onload=function()

        {

            var oC=document.getElementById('c1');

            var oGC=oC.getContext('2d');

            var oImg=new Image();

            oImg.onload=function()//图片预加载后才可以操作

            {

                draw(this);

            }

            oImg.src='1.PNG';

            function draw(obj)

            {

                oC.width=obj.width;//将画布设为图片宽的一倍

                oC.height=obj.height*2;//将画布设为图片高的两倍，以用来倒影

                oGC.drawImage(obj,0,0);//将图片画在画布上

                var newImg=oGC.getImageData(0,0,obj.width,obj.height);//得到图片数据

                var ONewImg = oGC.createImageData(obj.width,obj.height);

                //重要。要创建新的图片数据再将原来的反色后色数据赋值，

                // 如果直接在原数据上操作数据会导致数据覆盖而得不到结果

                for(var i=0;i<newImg.height;i++)

                {

                    for(var j=0;j<newImg.width;j++)

                    {

                        var color = getXY(newImg,j,i);//得到原来图片数据，一个像素有四个值，分别代表rgba

                        var result = [];

                        result[0] = 255 - color[0];

                        result[1] = 255 - color[1];

                        result[2] = 255 - color[2];

                        result[3] = 255*i/newImg.height;

                        setXY(ONewImg,j,newImg.height-i,result);//设置到新的数据里面

                    }

                }

                oGC.putImageData(ONewImg,0,obj.height);//将图片数据设置到画布中

            }

            //获取rgba

            function getXY(obj,x,y)

            {

                var w=obj.width;

                var h=obj.height;

                var data=obj.data;

                var color=[];

                color.push(data[(y*w+x)*4]);

                color.push(data[(y*w+x)*4+1]);

                color.push(data[(y*w+x)*4+2]);

                color.push(data[(y*w+x)*4+3]);

                return color;

            }

           //设置rgba

            function setXY(obj,x,y,color)

            {

                var w=obj.width;

                var h=obj.height;

                var data=obj.data;

                data[(y*w+x)*4]=color[0];

                data[(y*w+x)*4+1]=color[1];

                data[(y*w+x)*4+2]=color[2];

                data[(y*w+x)*4+3]=color[3];

            }

        }

    </script>

</head>

<body>

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

</body>

</html>

　　图片：

效果：

2017-09-09   22:40:39

canvas 图片反色的更多相关文章

  1. html5 canvas图片反色

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. php对图片反色处理

    今天有个需求用php对图片进行反色,和转灰,之前不知道可不可行,后来看到了imagefilter()函数,用来转灰绰绰有余,好强大: imagefilter($im, IMG_FILTER_GRAYS ...

  3. C# 图片反色处理 图片夜间模式

    项目属性-->生成-->允许不安全代码勾上. 代码: /// <summary> /// 反色处理 /// </summary> private Bitmap In ...

  4. Mac 把图片反色

    黑色图变白色 1:用预览打开 2:打开"调整颜色" 3:把"自动色阶"两边的按钮, 拖动换位置,就可以看到效果了.

  5. canvas简单处理图片(反色处理)

    用canvas可以简单地处理图像,比如切割 灰色处理等,今天记下的是图像的反色处理. <!DOCTYPE html> <html> <head> <meta ...

  6. [js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)

    接着上文[js高手之路] html5 canvas系列教程 - 状态详解(save与restore),相信大家都应该玩过美颜功能,而我们今天要讲的就是canvas强大的像素处理能力,通过像素处理,实现 ...

  7. html、canvas、视频灰度、反色

    效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  8. 批量生成反色图片，用PHOTOSHOP批处理功能。

    http://zhidao.baidu.com/link?url=Iz46PDPnEITummTEwo2GtUrK6AeAjlidJ7HtCPJ6NYZJbbllRwNg2iBAcNwF2TYjccP ...

  9. 小技巧！CSS 提取图片主题色功能探索

    本文将介绍一种利用 CSS 获取图片主题色的小技巧.一起看看~ 背景 起因是微信技术群里有个同学发问,有什么方法能够获取图片的主色呢?有一张图片,获取他的主色调: 利用获取到的这个颜色值,来实现类似这 ...

随机推荐

  1. Sentinel 1.7.0 发布，支持 Envoy 集群流量控制

    流控降级中间件Sentinel 1.7.0版本正式发布,引入了 Envoy 集群流量控制支持.properties 文件配置.Consul/Etcd/Spring Cloud Config 动态数据源 ...

  2. 关于SQL Server系统数据库详解

    介绍这里我们介绍SQL Sever内部的系统数据库的作用和用户数据库之间联系,关于SQL Sever如何管理用户数据库的原理,对于每个数据库开发人员和DBA都是必须掌握的. SQL Sever系统数据 ...

  3. python 3.6连接数据库（pymysql方式）

    pymysql 模块可以通过 pip 安装.但如果你使用的是 pycharm IDE,则可以使用 project python 安装第三方模块. [File] >> [settings] ...

  4. php md5()函数 语法

    php md5()函数 语法 作用:字符串md5编码.dd马达价格 语法:md5(string,raw) 参数: 参数 描述 string     必需.规定要计算的字符串. raw     可选.规 ...

  5. 20180715-Java 数组

    double[] myList //首选方法 double myList[] //效果相同,但不是首选方法 该实例完整地展示了如何创建.初始化和操纵数组: public class TestArray ...

  6. LintCode之移动零

    题目描述: 分析:由于要使非零元素保持原数组的顺序,我只能想出在找到一个0时,逐个移动数组元素使得后一个元素覆盖前一个元素,再将这个0移到后头去. 我的代码: public class Solutio ...

  7. 关于线段树or 树状树状 在二维平面搞事情！Orz

    第一式:https://ac.nowcoder.com/acm/contest/143/I 题意: 有 n 个点,一个点集 S 是好的,当且仅当对于他的每个子集 T,存在一个右边无限长的矩形,使得这个 ...

  8. MVC终极解释

    之前校招笔面试老师被问起MVC,虽然都知道怎么回事.但每次组织语言总觉得答得的简洁明了和突出重点.下面是我总结,希望未来找工作的学弟学妹们能不在受此大路边上的问题困扰. M-V-C 即Model-Vi ...

  9. 下载 GitHub 上保存在 AWS 的文件

    通过 GitHub 下载文件时,发现很多文件保存在亚马逊的 AWS 上.而国内访问 AWS 的速度很慢,经常会有文件下载失败.常用的解决方案是挂代理,但我这边挂了代理还是很慢,只好找其他办法. AWS ...

  10. 理解jquery的$.extend()、$.fn.extend()【jQuery插件机制】

    /** * 操作数据 | DOM 操作 * @description jQuery类添加类方法,可以理解为添加静态方法,将一个或多个对象的内容合并到目标对象 * @use $.fn.zhang() | ...