用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. slf4j介绍以及实现原理窥探

    一.概述 slf4j(全称是Simple Loging Facade For Java)是一个为Java程序提供日志输出的统一接口,并不是一个具体的日志实现方案,就好像我们经常使用的JDBC一样,只是 ...

  2. js小游戏---智力游戏

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD ...

  3. php 总结第一篇（望大家补充！谢谢）

    /* 数组的常用函数 * * 数组的排序函数 *   sort() *   rsort() *   usort() *   asort() *   arsort() *   uasort() *   ...

  4. SqlServer性能检测和优化工具使用详细（转）

    转载链接:http://www.cnblogs.com/knowledgesea/p/3683505.html 工具概要 如果你的数据库应用系统中,存在有大量表,视图,索引,触发器,函数,存储过程,s ...

  5. SpringMVC学习（二）

    SpringMVC入门(注解方式) 需求 实现商品查询列表功能. 第一步:创建Web项目 springmvc02 第二步:导入jar包 第三步:配置前端控制器 在WEB-INF\web.xml中配置前 ...

  6. PAT A 1018. Public Bike Management (30)【最短路径】

    https://www.patest.cn/contests/pat-a-practise/1018 先用Dijkstra算出最短路,然后二分答案来验证,顺便求出剩余最小,然后再从终点dfs回去求出路 ...

  7. [leetcode] 一些会的

    链表: 61. Rotate List Given a list, rotate the list to the right by k places, where k is non-negative. ...

  8. js动态加载以及确定加载完成的代码

    利用原生js动态加载js文件到页面,并在确定加载完成后调用相关function var otherJScipt = document.createElement("script") ...

  9. oj Rapid Typing

    import bs4 import requests import urllib2 import time import base64 session=requests.Session() respo ...

  10. 借鉴dubbo实现自定义缓存

    自定义缓存一般基于ConcurrentMap实现,实现缓存需要注意的点是缓存容器对象 本身依赖于 static final去存储对象,样例: ConcurrentMap<String, Gene ...