用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 logging

    参考: https://docs.python.org/2/howto/logging.html#logging-basic-tutorial https://docs.python.org/2/li ...

  2. .NET LINQ 限定符操作

    限定符操作      限定符运算返回一个 Boolean 值,该值指示序列中是否有一些元素满足条件或是否所有元素都满足条件. 方法 方法名 说明 C# 查询表达式语法 Visual Basic 查询表 ...

  3. datepicker使用

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

  4. 牛B的调试工具：OzCode

      官网:http://www.oz-code.com/ 视频:https://channel9.msdn.com/Shows/Visual-Studio-Toolbox/OzCode https:/ ...

  5. setTimeout使用闭包功能,实现定时打印数值

    我们这次使用setTimeout来实现一个按照时间定时,依次打印数值的例子.其实在早期的时候,也是我经常犯的一个错误,或者实现这种能力,似乎js比较牵强,其实是我的错,哈哈!没能理解JS强大之处.我们 ...

  6. wap

    1.wap下拉刷新丑陋版 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...

  7. 反射 + 抽象工厂模式切换DB数据源（附Demo）

    首先,设计模式的文章源自于程杰的<大话设计模式>这本书,这本书个人感觉很适合我,看着不累,能够安安心心的阅读学习.在这里十分感谢程杰的这本书,我博文中的例子会根据书上的例子来.为了不侵犯这 ...

  8. ubuntu wifi连接不上或经常断网，重启就好

    问题1.知道wifi密码,驱动也有,可以点击连接,总是提示"连接断开,您现在处于离线状态". 1.打开终端"ctrl+alt+T" 2.输入: sudo vim ...

  9. Oracle的索引适用范围

    若字段数据的重复率不是很高,而且数据量不是很大,考虑B树索引: 若字段数据的重复率较高,而且查询中有特定的查询方式(比如列之间有或,与等逻辑运算),则考虑位图索引: 若对列中的字段进行模糊查询或者语言 ...

  10. H5中REM中使用的规则

    /*REM单位换算方法 iphone6适配*/ function resizeRoot(){ var Dpr = 1, uAgent = window.navigator.userAgent; var ...