当前位置：网站首页>《canvas》之第8章 像素操作
《canvas》之第8章 像素操作
2022-06-29 13:55:00 【yxqq378287007】
《canvas》之第8章 像素操作
第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.restore cxt.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); //获取一个图片的imgData var 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>
边栏推荐
猜你喜欢
随机推荐
Nuscenes configuration information about radar
STM32 watchdog study
广州开展瓶装气安全宣传活动，普及燃气安全知识
mysql多表查询
Redis哨兵机制原理详解
Goby full port scan
Wechat applet: repair collection interface version cloud development expression package
Hardware development notes (VIII): basic process of hardware development, making a USB to RS232 module (VII): creating a basic dip component (crystal oscillator) package and associating the principle
numpy数组创建
Installation and removal of cover for CPU protection on desktop motherboard
嵌入式开发：硬件在环测试
[network bandwidth] Mbps & Mbps
微信小程序：(更新)云开发微群人脉
goby全端口扫描
Intuition and Implementation: batch normalization
单项数据流之子组件修改父组件的值
[dark horse morning post] the market value of China public education has evaporated by more than 200billion; New Oriental has more than 20million live fans; HM closes its first store in China; Vanke Y
传输层 用户数据报协议（UDP）
matplotlib直方图，柱状图
灵感收集·创意写作软件评测：Flomo、Obsidian Memo、Napkin、FlowUs