HTML5 Canvas ( 图形的像素操作 ) getImageData, putImageData, ImgData.data
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas</title>
<script type="text/javascript" src="../js/jQuery.js"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
outline: none;
border: none;
}
canvas{
width: 4rem;
float: left;
border: 1px solid black;
}
canvas:nth-child(2){
float: right;
}
button{
float: left;
padding: .1rem .2rem;
font-size: .7rem; }
</style>
</head>
<body>
<canvas id="canvasA" width="500" height="400"></canvas>
<canvas id="canvasB" width="500" height="400"></canvas>
<button id="filter">复制</button>
</body>
</html>
<script type="text/javascript">
/**
* rem 布局初始化
*/
$('html').css('font-size', $(window).width()/10); /**
* 获取 canvas 画布
* 获取 canvas 绘图上下文环境
*/
var canvasA = $('#canvasA')[0];
var cxtA = canvasA.getContext('2d'); var canvasB = $('#canvasB')[0];
var cxtB = canvasB.getContext('2d'); /**
* 获取canvas画布的内容 getImageData
* 内容放回到canvas画布 putImageData
* 获取ImgData的每一个像素 ImgData.data
* getImageData(起始点的横坐标, 起始点的纵坐标, 获取的宽度, 获取的高度)
* putImageData(绘制点的横坐标, 绘制点点纵坐标, imgData的起始点横坐标, imgData的起始点纵坐标, 宽度, 高度)
*/
var img = new Image();
img.src = "../img/background_2.jpg";
img.onload = function(){
cxtA.drawImage(img, 0, 0, canvasA.width, canvasA.height);
} $('#filter').on('click', function(){
var imgDataA = cxtA.getImageData(0, 0, canvasA.width, canvasA.height);
var pxData = imgDataA.data; //获取每一个像素 for(var i = 0; i < canvasB.width * canvasB.height; i++){
//灰度滤镜
var r = pxData[4*i+0];
var g = pxData[4*i+1];
var b = pxData[4*i+2];
//计算灰度的公式
var grey = 0.3*r + 0.59*g + 0.11*b;
pxData[4*i+0] = grey;
pxData[4*i+1] = grey;
pxData[4*i+2] = grey; }
cxtB.putImageData(imgDataA, 0, 0, 0, 0, canvasB.width, canvasB.height);
});
</script>
HTML5 Canvas ( 图形的像素操作 ) getImageData, putImageData, ImgData.data的更多相关文章
- [js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)
接着上文[js高手之路] html5 canvas系列教程 - 状态详解(save与restore),相信大家都应该玩过美颜功能,而我们今天要讲的就是canvas强大的像素处理能力,通过像素处理,实现 ...
- canvas上的像素操作(图像复制，细调)
canvas上的像素操作(图像复制,细调) 总结 1.操作对象:ImageData 对象,其实是canvas的像素点集合 2.主要操作: var obj=ctx.getImageData(0,0,10 ...
- [js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,createPattern)
接着上文[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)继续,本文介绍的 ...
- HTML5 Canvas一些常用的操作
粗略的Canvas API 1. context var context = canvas.getContext('2d'); 2.Canvas state context.save();//将当前状 ...
- HTML5 Canvas ( 图形的透明度和遮盖 ) globalAlpha, globalCompositeOperation
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- HTML5 Canvas ( 图形变换矩阵 ) transform, setTransform
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- HTML5 Canvas ( 图形变换, 升级版的星空 ) translate, rotate, scale
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- HTML5 Canvas ( 图形的阴影 ) shadowColor, shadowOffsetX, shadowOffsetY, shadowNlur
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- [js高手之路] html5 canvas系列教程 - 线形渐变,径向渐变与阴影设置
接着上文[js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)继续. 一.线形渐变 线形渐变指的是一条直线上发生的渐变. 用法: var linear ...
随机推荐
- 字符串匹配--AC自动机模板
AC自动机果断是神一样的东西,我赶在比赛前学习还是有用的,AC自动机最基本的是可以解决多个模式串在一个长字符串中出现的种类数或次数: 我暂时还是修改大神们的模板的昂 满满个人注释版帮助自己理解版: / ...
- .gitignore忽略git版本库中的文件(夹)
# 忽略*.o和*.a文件 *.[oa] # 忽略*.b和*.B文件,my.b除外 *.[bB] !my.b # 忽略dbg文件和dbg目录 dbg # 只忽略dbg目录,不忽略dbg文件 dbg/ ...
- 脸部识别JavaScript类库Tracking.js
作者 王文刚 发布于 2014年8月10日 | 对Web开发者而言,开源的JavaScript库Tracking.js正在使计算机视觉和增强现实技术变得简单, 使用它可以展示效果类似Kinect或 ...
- gridview 自动序号 合计
第一种方式,直接在Aspx页面GridView模板列中.这种的缺点是到第二页分页时又重新开始了. <asp:TemplateField HeaderText="序号" Ins ...
- 使用 Python 连接到 PADS Layout
使用 Python 连接到 PADS Layout PADS Layout 使用的是 VBA 编程,很多人说 VBA 很简单,但是实在学不会,可能是太笨了. 后来发现 PADS Layout 有 CO ...
- RAC3——RAC原理开始
1.RAC并发 RAC的本质是一个数据库,只不过现在这个数据库运行在了多台计算机上,在原先的单实例中,一个进程是否可以修改一条数据,取决于是否有其他进程(同一台计算机上)并发修改.在RAC环境下,这种 ...
- java 多线程之：synchronized
synchronized原理 在java中,每一个对象有且仅有一个同步锁.这也意味着,同步锁是依赖于对象而存在. 当我们调用某对象的synchronized方法时,就获取了该对象的同步锁.例如,syn ...
- vue-cli 知识点
vue init webpack [project_name] 构建的项目,新增功能需要做的工作: table th:first-of-type { width: 100px; } table th: ...
- 【python】class之子类
父类: class AddrBookEntry(object): "address book entry class" def __init__(self, nm, ph): se ...
- BASIC-23_蓝桥杯_芯片测试
思路: 1.当测试与被测试的芯片全部可以互相测试时,为好芯片; 示例代码: #include <stdio.h>#define N 20 int main(void){ int n = 0 ...