canvas像素操作 原
我们可以通过ImageData对象操纵像素数据,直接读取或将数据数组写入该对象中
ImageData对象中存储着canvas对象真实的像素数据,包含以下几个只读属性 width : 图片宽度 ,单位是像素 height: 图片高度,单位是像素 data:Uint8ClampedArray (8为无符号整型固定数组)类型的一维数组,包含着GRBA格式的整型数据,范围在0至255之间(包括255) data属性可以被使用作为查看初始像素数据。每个像素用4个1bytes的值来代表(RGBA格式,红色R的索引是0位置),像素的索引也是从0开始
例如,要读取图片汇总位于第50行,第200列的像素的蓝色部分,是下面的代码
blueComponent = imageData.data[((50-1)*imageData.width + (200-1))*4 - 1 + 3] 解释:(50-1)*imageData.width 指49行总共的像素数,(200-1)第50行的像素数,减1的原因是像素的索引也是从0开始 公式:imageData.data[((行数-1)*imageData.width + (列数-1))*4 - 1 + 1/2/3/4]; 获取Uint8ClampedArray 的长度 var numBytes = imageData.data.length;
如何创建一个ImageData对象?
var myImageData = ctx.createImageData(width,height) 上面代码创建了一个新的具体特定尺寸的ImageData对象。所有像素被预设为透明黑 你也可以创建一个被anotherImageData对象指定的相同像素的ImageData对象。这个新的对象像素全部被预设为透明黑。这个并非复制了图片数据 var myImageData = ctx.createImageData(anotherImageData)
如何得到场景像素数据?
var myImageData = ctx.getImageData(left,top,width,height),坐标点形成坐标空间元素 注意:任何在画布以外的元素都会被返回成一个透明黑的ImageData对象
在场景中写入像素数据
你可以用putImageData()方法去对场景进行像素数据的写入 ctx.putImageData(myImageData,dx,dy)
图片灰度和反相颜色
这下面这个例子里,我们遍历所有像素以改变他们的数值,然后我们将被修改的像素数组通过putImageData()放回到画布中去
完整的反相颜色与图片灰度的例子:
<body >
<canvas id="canvas" width="600" height="300" style=""></canvas>
<button id="invertBtn"> 反色 </button>
<button id="grayscalebtn"> 灰色 </button>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var img = new Image();
img.src = 'images/rhino.jpg';
img.onload=function(){
draw(this)
};
function draw(img) {
var canvas = document.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.drawImage(img,0,0);
img.style.display = "none";
var imageData = ctx.getImageData(0,0,canvas.width,canvas.height);
var data = imageData.data;
var invert = function() {
for(var i =0;i<data.length;i+=4){
data[i]=255-data[i];
data[i+1] = 255-data[i+1];
data[i+2] = 255-data[i+1]
}
ctx.putImageData(imageData,0,0)
};
var grayscale = function() {
for(var i=0;i<data.length;i+=4) {
var avg = (data[i]+data[i+1]+data[i+2])/3;
data[i] = avg;
data[i+1] = avg;
data[i+2] = avg
}
ctx.putImageData(imageData,0,0)
};
var invertbtn = document.getElementById("invertBtn");
invertbtn.addEventListener("click",invert);
var grayscalebtn = document.getElementById("grayscalebtn");
grayscalebtn.addEventListener("click",grayscale)
}
</script>
</body>
(adsbygoogle = window.adsbygoogle || []).push({});
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 树莓派基础实验16:霍尔传感器实验
- 1.opengl绘制三角形
- dubbo本地直连调试注意点
- Tomcat的使用及服务器的一些基础知识
- fastJson 之JSONObject.toJavaObject()方法不能解析嵌套自定义list对象
- 文件包含漏洞学习总结(结尾有实例)
- 树莓派基础实验17:温度传感器实验
- Java Servlet详解(体系结构+注解配置+生命周期)
- RabbitMq如何确保消息不丢失
- 《sql必知必会》——读书笔记(4)
- AkShare-债券数据-国债期货可交割券相关指标
- Linux From Scratch
- 介绍一款 API 敏捷开发工具
- java线程池(五):ForkJoinPool源码分析之一(外部提交及worker执行过程)
- JavaScript中的匿名函数、闭包和BOM