用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 os.path

    os.path 提供了一些处理文件路径的函数. os.path.abspath(path) 返回绝对路径, 在大多数平台上, os.path.abspath(path) == os.path.norm ...

  2. CentOS7 开机调整亮度

    默认亮度是100,受不了,所与就自己想了个办法,依赖其它的自启动服务使我的设置生效. /usr/lib/systemd/scripts/nfs-utils_env.sh这是一个开机自启动服务要用到的脚 ...

  3. firefox

    ctrl  l            定位到地址栏 f6            同ctrl  l ctrl  k            定位到搜索框 shift  delete        删除地址 ...

  4. Quartz Job基本示例

    项目中用到job的主要是各种公告,比如活动开始公告这种,以此为例: public class Domain { public Domain() { AnnounceManager.getIns().s ...

  5. AFNetworking3.0介绍，收藏

    参考:http://www.jianshu.com/p/5969bbb4af9f 很多时候,AFNetworking都是目前iOS开发者网络库中的不二选择.Github上2W+的star数足见其流行程 ...

  6. JSON&XML总结

    JSON&XML: JSON----- //英译 Serialization:序列化 perform:执行 segue:继续 IOS5后 NSJSONSerialization解析 解析JSO ...

  7. VR技术的高速发展阶段

    转载请声明转载地址:http://www.cnblogs.com/Rodolfo/,违者必究. 在虚拟现实技术的高速发展阶段,与虚拟现实密切相关的计算机图形学.数字图像处理.传感技术等学科迅速发展,从 ...

  8. AT常见问题

    https://m.douban.com/note/247040789/?from=author

  9. Win10 UI入门RelativePanel

    <RelativePanel Background="Black" > <Rectangle x:Name=" RelativePanel.AlignH ...

  10. 【leetcode】Simplify Path

    题目简述: Given an absolute path for a file (Unix-style), simplify it. For example, path = "/home/& ...