• 《canvas》之第8章 像素操作

    《canvas》之第8章 像素操作

    第8章 像素操作

    8.1 像素操作简介

    getImageData()和putImageData()方法进行图片像素操作。

    8.1.1 getImageData()方法

    获取图片像素数据。

    var imgData = cxt.getImageData(x, y, width, height);
var data = imgData.data;

    • 1
    • 2

    imagData，canvasPixelArray对象。
    data，数组，[r1, g1, b1, a1, …]。

    8.1.2 putImageData()方法

    在canvas中显示图片。

    cxt.putImageData(image, x, y);

    • 1

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34

    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];
}

    • 1
    • 2
    • 3
    • 4
    • 5
    <!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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 数据裁剪
    <!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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36

    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;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    <!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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 加权平均
    <!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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37

    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;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    <!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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37

    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;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    <!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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40

    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;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    <!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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41

    8.7 透明处理

    透明度乘以n。

    var n = 0.3;
for(var i=0; i<data.length; i+=4) {
	data[i+3] *= n;
}

    • 1
    • 2
    • 3
    • 4

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
  • 相关阅读:
    PMP_第2章章节试题
    享受新的安卓功能带来乐趣
    Docker-查看镜像仓库中镜像的版本信息
    花14天梳理了4月份各大厂问得最多的50道Java基础面试题
    日常开发中，提升技术的13个建议
    Codeforces Round #792 (Div. 1 + Div. 2)
    根据服务器系统选择对应的MySQL版本
    JAVA学习(3)-全网最详细~
    *蓝桥OJ 1508N皇后问题 DFS
    【前端知识】Three 学习日志（十一）—— 高光网格材质Phong
  • 原文地址：https://blog.csdn.net/oqqyx1234567/article/details/125362888