《canvas》之第8章 像素操作
2024-04-23 05:13:10
《canvas》之第8章 像素操作
- 第8章 像素操作
- 8.1 像素操作简介
- 8.1.1 getImageData()方法
- 8.1.2 putImageData()方法
- 8.1.3 getImageData()和putImageData()方法
- 8.2 反转效果
- 8.3 黑白效果
- 8.4 亮度效果
- 8.5 复古效果
- 8.6 红色蒙版
- 8.7 透明处理
- 8.8 createImageData()方法
第8章 像素操作
8.1 像素操作简介
getImageData()和putImageData()方法进行图片像素操作。
8.1.1 getImageData()方法
获取图片像素数据。
var imgData = cxt.getImageData(x, y, width, height);
var data = imgData.data;
imagData，canvasPixelArray对象。
data，数组，[r1, g1, b1, a1, …]。
8.1.2 putImageData()方法
在canvas中显示图片。
cxt.putImageData(image, x, y);
8.1.3 getImageData()和putImageData()方法
getImageData()和putImageData()不受坐标系变换的影响。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title><meta charset="utf-8" /><script type="text/javascript">function $$(id) {return document.getElementById(id);}window.onload = function () {var cnv = $$("canvas");var cxt = cnv.getContext("2d");//cxt.save();cxt.translate(50, 50);cxt.fillStyle = "green"cxt.fillRect(0, 0, 50, 200);cxt.rotate(-30 * Math.PI / 180)cxt.fillStyle = "blue"cxt.fillRect(0, 0, 50, 200);//cxt.restorecxt.strokeStyle = "red"cxt.strokeRect(50, 50, 50, 50);var data = cxt.getImageData(50, 50, 50, 50);cxt.putImageData(data, 200, 100);}</script>
</head>
<body><canvas id="canvas" width="400" height="300" style="border:1px dashed gray;"></canvas>
</body>
</html>
8.2 反转效果
颜色反转，像素取相反值。
for(var i=0; i<data.length; i+=4) {data[i+0] = 255-data[i+0];data[i+1] = 255-data[i+1];data[i+2] = 255-data[i+2];
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title><meta charset="utf-8" /><script type="text/javascript">function $$(id) {return document.getElementById(id);}window.onload = function () {var cnv = $$("canvas");var cxt = cnv.getContext("2d");var image = new Image();image.src = "images/princess.png";image.onload = function () {cxt.drawImage(image, 10, 10);var imgData = cxt.getImageData(10, 10, 120, 120);var data = imgData.data;//遍历每个像素for (var i = 0; i < data.length; i += 4) {data[i + 0] = 255 - data[i + 0];data[i + 1] = 255 - data[i + 1];data[i + 2] = 255 - data[i + 2];}//在指定位置输出图片cxt.putImageData(imgData, 140, 10);}}</script>
</head>
<body><canvas id="canvas" width="300" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
- 数据裁剪
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title><meta charset="utf-8" /><script type="text/javascript">function $$(id) {return document.getElementById(id);}window.onload = function () {var cnv = $$("canvas");var cxt = cnv.getContext("2d");var image = new Image();image.src = "images/princess.png";image.onload = function () {cxt.drawImage(image, 10, 10);var imgData = cxt.getImageData(10, 10, 60, 120);var data = imgData.data;//遍历每个像素for (var i = 0; i < data.length; i += 4) {data[i + 0] = 255 - data[i + 0];data[i + 1] = 255 - data[i + 1];data[i + 2] = 255 - data[i + 2];}//在指定位置输出图片cxt.putImageData(imgData, 140, 10);}}</script>
</head>
<body><canvas id="canvas" width="250" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
8.3 黑白效果
灰度图（average），彩色图片转换成黑白图片。
for(var i=0; i<data.length; i+=4) {var average = (data[i+0]+data[i+1]+data[i+2]) / 3;data[i+0] = average;data[i+1] = average;data[i+2] = average;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title><meta charset="utf-8" /><script type="text/javascript">function $$(id) {return document.getElementById(id);}window.onload = function () {var cnv = $$("canvas");var cxt = cnv.getContext("2d");var image = new Image();image.src = "images/princess.png";image.onload = function () {cxt.drawImage(image, 10, 10);var imgData = cxt.getImageData(10, 10, 120, 120);var data = imgData.data;//遍历每个像素for (var i = 0; i < data.length; i += 4) {var average = (data[i+0]+data[i+1]+data[i+2]) / 3;data[i+0] = average;data[i+1] = average;data[i+2] = average;}//在指定位置输出图片cxt.putImageData(imgData, 140, 10);}}</script>
</head>
<body><canvas id="canvas" width="300" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
- 加权平均
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title><meta charset="utf-8" /><script type="text/javascript">function $$(id) {return document.getElementById(id);}window.onload = function () {var cnv = $$("canvas");var cxt = cnv.getContext("2d");var image = new Image();image.src = "images/princess.png";image.onload = function () {cxt.drawImage(image, 10, 10);var imgData = cxt.getImageData(10, 10, 120, 120);var data = imgData.data;//遍历每个像素for (var i = 0; i < data.length; i += 4) {var grayscale = data[i+0]*0.3+data[i+1]*0.6+data[i+2]*0.1;data[i+0] = grayscale;data[i+1] = grayscale;data[i+2] = grayscale;}//在指定位置输出图片cxt.putImageData(imgData, 140, 10);}}</script>
</head>
<body><canvas id="canvas" width="300" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
8.4 亮度效果
图片变得更亮或更暗，加减值。
var a = -50;
for(var i=0; i<data.length; i+=4) {data[i+0] += a;data[i+1] += a;data[i+2] += a;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title><meta charset="utf-8" /><script type="text/javascript">function $$(id) {return document.getElementById(id);}window.onload = function () {var cnv = $$("canvas");var cxt = cnv.getContext("2d");var image = new Image();image.src = "images/princess.png";image.onload = function () {cxt.drawImage(image, 10, 10);var imgData = cxt.getImageData(10, 10, 120, 120);var data = imgData.data;//遍历每个像素for (var i = 0; i < data.length; i += 4) {var a = 50;data[i + 0] += a;data[i + 1] += a;data[i + 2] += a;}//在指定位置输出图片cxt.putImageData(imgData, 140, 10);}}</script>
</head>
<body><canvas id="canvas" width="300" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
8.5 复古效果
sepia，古旧效果，加权平均。
for(var i=0; i<data.length; i+=4) {var r = data[i+0];var g = data[i+1];var b = data[i+2];data[i+0] = r*0.39+g*0.76+b*0.18;data[i+1] = r*0.35+g*0.68+b*0.16;data[i+2] = r*0.27+g*0.53+b*0.13;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title><meta charset="utf-8" /><script type="text/javascript">function $$(id) {return document.getElementById(id);}window.onload = function () {var cnv = $$("canvas");var cxt = cnv.getContext("2d");var image = new Image();image.src = "images/princess.png";image.onload = function () {cxt.drawImage(image, 10, 10);var imgData = cxt.getImageData(10, 10, 120, 120);var data = imgData.data;//遍历每个像素for (var i = 0; i < data.length; i += 4) {var r = data[i + 0];var g = data[i + 1];var b = data[i + 2];data[i + 0] = r * 0.39 + g * 0.76 + b * 0.18;data[i + 1] = r * 0.35 + g * 0.68 + b * 0.16;data[i + 2] = r * 0.27 + g * 0.53 + b * 0.13;}//在指定位置输出图片cxt.putImageData(imgData, 140, 10);}}</script>
</head>
<body><canvas id="canvas" width="300" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
8.6 红色蒙版
图片偏红的效果。r取rgb平均值，g，b取0。
for(var i=0; i<data.length; i+=4) {var r = data[i+0];var g = data[i+1];var b = data[i+2];var average = (r+g+b)/3;data[i+0] = average;data[i+1] = 0;data[i+2] = 0;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title><meta charset="utf-8" /><script type="text/javascript">function $$(id) {return document.getElementById(id);}window.onload = function () {var cnv = $$("canvas");var cxt = cnv.getContext("2d");var image = new Image();image.src = "images/princess.png";image.onload = function () {cxt.drawImage(image, 10, 10);var imgData = cxt.getImageData(10, 10, 120, 120);var data = imgData.data;//遍历每个像素for (var i = 0; i < data.length; i += 4) {var r = data[i + 0];var g = data[i + 1];var b = data[i + 2];var average = (r + g + b) / 3;data[i + 0] = average;data[i + 1] = 0;data[i + 2] = 0;}//在指定位置输出图片cxt.putImageData(imgData, 140, 10);}}</script>
</head>
<body><canvas id="canvas" width="300" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
8.7 透明处理
透明度乘以n。
var n = 0.3;
for(var i=0; i<data.length; i+=4) {data[i+3] *= n;
}
n取值范围0.0~1.0。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title><meta charset="utf-8" /><script type="text/javascript">function $$(id) {return document.getElementById(id);}window.onload = function () {var cnv = $$("canvas");var cxt = cnv.getContext("2d");var image = new Image();image.src = "images/princess.png";image.onload = function () {cxt.drawImage(image, 10, 10);var imgData = cxt.getImageData(10, 10, 120, 120);var data = imgData.data;//遍历每个像素for (var i = 0; i < data.length; i += 4) {data[i + 3] = data[i + 3] * 0.3;}//在指定位置输出图片cxt.putImageData(imgData, 140, 10);}}</script>
</head>
<body><canvas id="canvas" width="300" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
8.8 createImageData()方法
创建区域进行像素操作。
- createImageData(sw, sh)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title><meta charset="utf-8" /><script type="text/javascript">function $$(id) {return document.getElementById(id);}window.onload = function () {var cnv = $$("canvas");var cxt = cnv.getContext("2d");var imgData = cxt.createImageData(100, 100);var data = imgData.data;for (var i = 0; i < 100 * 100 * 4; i += 4) {data[i + 0] = 0;data[i + 1] = 0;data[i + 2] = 255;data[i + 3] = 255;}cxt.putImageData(imgData, 20, 20);}</script>
</head>
<body><canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
- createImageData(imageData)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title><meta charset="utf-8" /><script type="text/javascript">function $$(id) {return document.getElementById(id);}window.onload = function () {var cnv = $$("canvas");var cxt = cnv.getContext("2d");var image = new Image();image.src = "images/princess.png";image.onload = function () {cxt.drawImage(image, 0, 0, 60, 60);//获取一个图片的imgDatavar imgData1 = cxt.getImageData(0, 0, 60, 60);//利用这个图片的imgData作为参数var imgData2 = cxt.createImageData(imgData1);var data = imgData2.data;for (var i = 0; i < imgData2.width * imgData2.height * 4; i += 4) {data[i + 0] = 0;data[i + 1] = 0;data[i + 2] = 255;data[i + 3] = 255;}cxt.putImageData(imgData2, 80, 0);}}</script>
</head>
<body><canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
《canvas》之第8章 像素操作相关推荐
- canvas上的像素操作(图像复制，细调)
canvas上的像素操作(图像复制,细调) 总结 1.操作对象:ImageData 对象,其实是canvas的像素点集合 2.主要操作: var obj=ctx.getImageData(0,0,10 ...
- canvas像素操作、save与restore、合成与变形
一.canvas像素操作 (1)获取图像像素 (2)写入像素数据 (3)创建像素数据 (4)小案例,将canvasA画布的图像复制到canvasB中 二.canvas的save与restore 三.c ...
- Canvas学习笔记及像素操作——实现马赛克
绘制文本 window.onload = function () {//获取画布var canvas = document.querySelector('#test')//检查支持性if (canva ...
- html5像素处理,HTML5 Canvas像素操作
本文介绍Canvas中强大的像素操作功能.这是非常有价值的一个功能,有了这一功能,就可以直接访问Canvas底层像素数据. 注意 由于人们可以直接操纵像素数据,因此出现了某些人利用从Canvas直接获 ...
- canvas像素操作 取色器 写入像素数据 缩放和反锯齿 保存图片
博客简介 HTML5中的canvas允许我们直接对像素进行操作,我们可以通过ImageData对象操纵像素数据,读取或将数据数组写入该对象中.这里还会介绍如何控制图像使其平滑(反锯齿)以及如何从Can ...
- canvas 像素操作（图片像素操作）
canvas 图片像素/像素操作 在 canvas 中的 drawImage() 方法允许在 canvas 中插入其他图像( img 和 canvas 元素都可以) .图片绘制上去后,我们可以通过 g ...
- canvas 像素操作
canvas 像素操作 在 canvas 中可以使用 context.drawImage(image,dx,dy) 方法将图片绘制在 canvas 上.将图片绘制上去后,还可以使用 context.g ...
- Python OpenCV像素操作
点击上方"小白学视觉",选择加"星标"或"置顶" 重磅干货,第一时间送达 本文转自:opencv学堂 Python OpenCV像素操作 环 ...
- html5 Canvas画图3：1像素线条模糊问题
上次我们讲到,canvas有时候会出现1像素的线条模糊不清且好像更宽的情况,如下图: 这样的线条显然不是我们想要的. 这篇文章的目的就是弄清楚里面的原理,以及解决它. 大家都知道屏幕上最小的显示尺寸就 ...
最新文章
- 趣谈iOS运行时的方法调用原理
- 5G空口存疑 革新还是4G演进？
- 网易2017春招笔试真题编程题集合（5）——魔力手环
- 谈谈我理解的敏捷开发--转载
- Objective-C中的@property
- windows phone 页面主题设计
- React中组件间通信的方式
- angularjs中按回车事件_浅谈angularjs中响应回车事件
- 【STM32】USART收发---内嵌中断向量控制器
- 在linux下挂载ios镜像文件,linux下挂载iso镜像文件
- 网络工程师Day2---实验2-1：HDLC和PPP配置
- Mac下如何将 GBK 编码的文档转成 UTF-8 编码的？
- CMD下复制文件和文件夹
- Android 9.0 开启飞行模式
- pdf转化为图片显示知多少
- 电压源和电流源的区别
- 原生js实现小方块拖拽
- ［网络安全］实操DVWS靶场复现CSRF漏洞
- 20,000 字帮你搞定策略模式！
- onenote for windows 10 下载与安装