用canvas可以简单地处理图像,比如切割 灰色处理等,今天记下的是图像的反色处理.

　　

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

</head>

<body>

<canvas id="board" width="500" height="500" style="background: lightgray;"></canvas>

</body>

</html>

<script type="text/javascript">

var board = document.getElementById("board");

var context = board.getContext("2d");

var aImg = new Image();

aImg.src = "img/7.jpg";

context.beginPath();

aImg.onload = function(){

context.drawImage(aImg,100,100);

var imageDatas = context.getImageData(100,100,aImg.width,aImg.height);

var dataArray = imageDatas.data;

//像素存在 r g b a 四个值,因此数组每四个数代表一个像素的信息,反色处理就是用 255 减去 r g b 现在的值

//如果想要灰色处理,就是 r g b 是等值的,可以将现在的 r g b 加起来除以3再分别赋值

for (var i = 0 ; i < dataArray.length ; i += 4) {

var r = 255 - dataArray[i];

var g = 255 - dataArray[i+1];

var b = 255 - dataArray[i+2];

dataArray[i] = r;

dataArray[i + 1] = g;

dataArray[i + 2] = b;

// var a = dataArray[i + 3]; //此处代表图片的透明度

// dataArray[i + 3] = a - Math.random() * 100; //透明度也是从 0-255,可以选择每个像素的透明度都是随机的一个数,这样会做出磨砂的效果

}

context.putImageData(imageDatas,200,200);

}

</script>

canvas简单处理图片(反色处理)的更多相关文章

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

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

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

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

  3. canvas 图片反色

    代码实例: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <tit ...

  4. canvas简单图片处理(灰色处理)

    反色处理写的比较简单,灰色处理写了一些注释 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...

  5. 在YUV图像上根据背景色实现OSD反色

    所谓的OSD其实就是在视频图像上叠加一些字符信息,比如时间,地点,通道号等, 在图像上叠加OSD通常有两种方式: 一种是在前端嵌入式设备上,在图像数据上叠加OSD, 这样客户端这边只需解码显示数据即可 ...

  6. bzoj 5393 [HAOI2018] 反色游戏

    bzoj 5393 [HAOI2018] 反色游戏 Link Solution 最简单的性质:如果一个连通块黑点个数是奇数个,那么就是零(每次只能改变 \(0/2\) 个黑点) 所以我们只考虑偶数个黑 ...

  7. C#开发PACS医学影像处理系统(十八)：Dicom使用LUT色彩增强和反色

    在医生阅片确诊的过程中,当发线疑似病灶时在灰度显示下有时并不清晰,这时候就需要色彩增强效果来使灰度图像变为彩色图像. LUT可以简单的理解为0-255的颜色映射值,例如:彩虹编码,将其打包成LUT格式 ...

  8. iOS实现图像的反色,怀旧，色彩直方图效果

    反色是与原色叠加可以变为白色的颜色,即用白色(RGB:1.0,1.0,1.0)减去原色的颜色.比如说红色(RGB:1.0,0,0)的反色是青色(0,1.0,1.0).在OPENGL ES中为1. 通过 ...

  9. php对图片反色处理

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

随机推荐

  1. python DBUtils.PooledDB 中 maxcached 和 maxconnections

    PooledDB 有这么几个参数 mincached : the initial number of idle connections in the pool (the default of 0 me ...

  2. LeetCode 27 Remove Element

    Problem: Given an array and a value, remove all instances of that value in place and return the new ...

  3. xamarin真的是一个鸡肋吗？

    team leader 极力推荐 Xamarin,于是下载下来体验了一把,并没有觉得用它来开发 App 会爽到哪里去,可能对于从事 C#开发的开发人员来说是个福音吧.于是看看别人对其评价如何,现粘贴如 ...

  4. datepicker使用

    JqueryUI作为一个优秀的前端库,被广泛的应用在项目中.之前做的一个排班考勤系统,跟时间打交道较多,对时间控件做过一些对比,觉得jqueryUI里的这个datepicker更为实用,配置起来也简单 ...

  5. pypy的virtualenv安装mysql的问题解决

    pypy安装mysql 构建基于pypy的virtualenv pip install virtualenv pip install pypy virtualenv --no-site-package ...

  6. 【Java EE 学习 35 下】【struts2】【struts2文件上传】【struts2自定义拦截器】【struts2手动验证】

    一.struts2文件上传 1.上传文件的时候要求必须使得表单的enctype属性设置为multipart/form-data,把它的method属性设置为post 2.上传单个文件的时候需要在Act ...

  7. 【tomcat ecplise】新下载一个tomcat,无法成功启动，或者启动了无法访问localhost:8080页面/ecplise无法添加新的tomcat/ecplise启动tomcat启动不起来

    今天转头使用ecplise,于是新下载一个tomcat7来作为服务器使用 但是问题来了: [问题1:全新的tomcat启动即消耗了不可思议的时间,并且启动了之前其他tomcat中的很多项目] [注意: ...

  8. /var/run/yum.pid 已被锁定，PID 为 XXXX 的另一个程序正在运行。

    安装st-load时, 终端提示 “/var/run/yum.pid 已被锁定,PID 为 13908 的另一个程序正在运行.” 解决方法:直接在终端运行 rm -f /var/run/yum.pid ...

  9. HDU 3642 Get The Treasury （线段树扫描线）

    题意:给你一些长方体,问你覆盖三次及以上的体积有多大 首先我们观察x轴y轴一样很大,但是z轴很小,所以我们可以枚举z轴(-500,500),注意我们枚举的是每一段长度为一的z轴的xy轴的面积而不是点. ...

  10. 2015ACM/ICPC亚洲区沈阳站

    5510 Bazinga 题意:给出n个字符串,求满足条件的最大下标值或层数 条件:该字符串之前存在不是 它的子串 的字符串 求解si是不是sj的子串,可以用kmp算法之类的. strstr是黑科技, ...