代码实例:

<!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. Xib中用自动布局设置UIScrollView的ContenSize

    1. 在UIScrollView上拖一个UIView 2.设置UIScrollView上下左右约束为0,设置UIView上下左右约束为0,并且设置水平中线约束.那么可以把水平中线约束拖到对应视图,利用 ...

  2. 百度ueditor新增的将word内容导入到富文本编辑框的功能.

    如何做到 ueditor批量上传word图片? 1.前端引用代码 <!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN& ...

  3. ERROR 1146 (42S02): Table 'mysql.servers' doesn't exist

    MySQL版本:mysql5.7.21 修改用户权限,刷新权限表,报1146 mysql> flush privileges; ERROR 1146 (42S02): Table 'mysql. ...

  4. p4593 [TJOI2018]教科书般的亵渎

    分析 我们发现$Ans = \sum_i \sum_j (j-p_i)^{m+1}$ 因此直接套用622f的方法即可 代码 #include<bits/stdc++.h> using na ...

  5. PostgreSQL 在视频、图片去重,图像搜索业务中的应用

    摘要: PostgreSQL 在视频.图片去重,图像搜索业务中的应用作者digoal日期2016-11-26标签PostgreSQL , Haar wavelet , 图像搜索 , 图片去重 , 视频 ...

  6. org.dom4j 解析XML

    org.dom4j 解析xml java 代码 1 import java.io.File; import java.io.FileOutputStream; import java.io.FileW ...

  7. ECMAScript 2015 可迭代协议:迭代普通对象

    可迭代协议允许 JavaScript 对象去定义或定制它们的迭代行为, 例如(定义)在一个 for..of结构中什么值可以被循环(得到). 一些内置类型都是内置的可迭代类型并且有默认的迭代行为( 比如 ...

  8. [LeetCode] 72. Edit Distance(最短编辑距离)

    传送门 Description Given two words word1 and word2, find the minimum number of steps required to conver ...

  9. mysql-时间格式

    SELECT DATE_FORMAT('2019-1-1 15:1:1.099','%Y-%m-%d %H:%i:%s.%f') -- 2019-01-01 15:01:01.099000 %a  缩 ...

  10. P2639 [USACO09OCT]Bessie的体重问题Bessie's Weight

    题目传送门 这题和01背包最大的区别在于它没有价值,所以我们可以人工给它赋一个价值,由于要求体积最大,把价值赋成体积即可.顺带一提,这题数据范围很大,二维会MLE,要压缩成一维才可以AC 下面给出参考 ...