当前位置：网站首页>Chapter 8 pixel operation of canvas
Chapter 8 pixel operation of canvas
2022-06-29 14:37:00 【yxqq378287007】
《canvas》 The first 8 Chapter Pixel operation
The first 8 Chapter Pixel operation
8.1 Introduction to pixel operation
getImageData() and putImageData() Method to perform image pixel operation .
8.1.1 getImageData() Method
Get picture pixel data .
var imgData = cxt.getImageData(x, y, width, height);
var data = imgData.data;
imagData,canvasPixelArray object .
data, Array ,[r1, g1, b1, a1, …].
8.1.2 putImageData() Method
stay canvas Show pictures in .
cxt.putImageData(image, x, y);
8.1.3 getImageData() and putImageData() Method
getImageData() and putImageData() Not affected by coordinate system transformation .
<!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 Inverse effect
Color reversal , The pixels take the opposite value .
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; // Traverse every pixel 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]; } // Output the picture at the specified position cxt.putImageData(imgData, 140, 10); } } </script>
</head>
<body>
<canvas id="canvas" width="300" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
- Data tailoring
<!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; // Traverse every pixel 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]; } // Output the picture at the specified position 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 Black and white effect
grayscale （average）, Convert color pictures to black and white pictures .
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; // Traverse every pixel 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; } // Output the picture at the specified position cxt.putImageData(imgData, 140, 10); } } </script>
</head>
<body>
<canvas id="canvas" width="300" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
- weighted mean
<!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; // Traverse every pixel 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; } // Output the picture at the specified position 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 Brightness effect
The picture becomes brighter or darker , Plus minus value .
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; // Traverse every pixel for (var i = 0; i < data.length; i += 4) {
var a = 50; data[i + 0] += a; data[i + 1] += a; data[i + 2] += a; } // Output the picture at the specified position 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 Retro effect
sepia, Antique effect , weighted mean .
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; // Traverse every pixel 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; } // Output the picture at the specified position 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 Red mask
The red effect of the picture .r take rgb Average ,g,b take 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; // Traverse every pixel 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; } // Output the picture at the specified position 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 Transparency
Transparency times n.
var n = 0.3;
for(var i=0; i<data.length; i+=4) {
data[i+3] *= n;
}
n Value range 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; // Traverse every pixel for (var i = 0; i < data.length; i += 4) {
data[i + 3] = data[i + 3] * 0.3; } // Output the picture at the specified position 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() Method
Create an area for pixel operation .
- 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); // Get a picture of imgData var imgData1 = cxt.getImageData(0, 0, 60, 60); // Using this picture imgData As a parameter 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>
边栏推荐
猜你喜欢
Wechat applet: new and exclusive cloud development wechat group contacts
Thanos store component
Wechat applet: Halloween avatar box generation tool
Build your own website (19)
Stable currency risk profile: are usdt and usdc safe?
Methods of accessing external services in istio grid
Recruiting talents and seeking development | Jincang of the National People's Congress won the "best employer school recruitment case Award"
openGauss社区成立SIG KnowledgeGraph
类模板案例-【数组类封装】
微信小程序：云开发表白墙微信小程序源码下载免服务器和域名支持流量主收益
随机推荐
leetcode:226. 翻转二叉树
Wechat applet: repair collection interface version cloud development expression package
Nuscenes configuration information about radar
精品商城拼团秒杀优惠折扣全功能完美双端自适应对接个人免签网站源码
Redis' data expiration clearing strategy and memory obsolescence strategy
Crazy digital collections, the next myth of making wealth?
《canvas》之第5章 文本操作
微信小程序：云开发表白墙微信小程序源码下载免服务器和域名支持流量主收益
URL encoding in Delphi7
人不成熟的特征
Navicat连接MySQL8.0的正确方法(亲测有效)
zabbix 5.0如何将esxi6.7添加到监控
留给比亚迪的时间还有三年
在同花顺上开户安全吗 开户在哪里申请
《canvas》之第9章 渐变与阴影
浅析 Istio——可观测性
常用postgresql数据操作备忘：时间
微信小程序：装B神器P图修改微信流量主小程序源码下载趣味恶搞图制作免服务器域名
TikTok全球短视频霸主地位或被YouTube反超
matplotlib直方图，柱状图