Computer_Graphics/lab_04.html at master · capsidimit/Computer_Graphics · GitHub

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<html>
    <body>
        <canvas width="500" , height="281" , id="layer_1"> </canvas>
        <canvas width="500" , height="281" , id="layer_2"> </canvas>
        <canvas width="500" , height="281" , id="layer_3"> </canvas>
        <script>
            var canvas = document.getElementById("layer_1");
            var ctx = canvas.getContext("2d");

            var canvas2 = document.getElementById("layer_2");
            var ctx2 = canvas2.getContext("2d");

            var canvas3 = document.getElementById("layer_3");
            var ctx3 = canvas3.getContext("2d");

            //
            ctx.font = "bold 12pt Arial";
            ctx2.font = "bold 12pt Arial";
            ctx3.font = "bold 12pt Arial";
            ctx.fillStyle = "#FF0000";
            ctx2.fillStyle = "#FF0000";
            ctx3.fillStyle = "#FF0000";
            ctx.textAlign = "bottom";
            ctx2.textAlign = "bottom";
            ctx3.textAlign = "bottom";
            ctx.textBaseline = "bottom";
            ctx2.textBaseline = "bottom";
            ctx3.textBaseline = "bottom";
            //


            let img = new Image();
            img.crossOrigin = "anonymus";
            img.src = "https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg"; //Jerry meme.jpg

            let _average=0;
            let img_data = new ImageData(1,1);
            let img_data2= new ImageData(canvas3.width,canvas3.height);
            img.onload = function () {
                ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
                img_data = ctx.getImageData(0, 0, canvas.width, canvas.height);

                for (var index = 0; index < img_data.data.length; index += 4)
                    {
                        _average = (img_data.data[index] + img_data.data[index+1] + img_data.data[index+2])/3;

                        img_data.data[index] = _average;
                        img_data.data[index + 1] = _average;
                        img_data.data[index + 2] = _average;
                        img_data.data[index + 3] = 255;
                    }

                ctx2.putImageData(img_data, 0, 0, 0, 0, canvas2.width, canvas2.height);

                for (let y=1; y<canvas.height-1; y++)
                  {
                        for (let x=1; x<canvas.width-1 ; x++)
                          {
                                  let G_x =  (img_data.data[((y+1)*canvas.width+x-1)*4]+2*(img_data.data[((y+1)*canvas.width+x)*4])+img_data.data[((y+1)*canvas.width+x+1)*4])-(img_data.data[((y-1)*canvas.width+x-1)*4]+2*(img_data.data[((y-1)*canvas.width+x)*4])+img_data.data[((y-1)*canvas.width+x+1)*4]);

                                  let G_y = (img_data.data[((y-1)*canvas.width+x+1)*4]+2*(img_data.data[((y)*canvas.width+x+1)*4])+img_data.data[((y+1)*canvas.width+x+1)*4])-(img_data.data[((y-1)*canvas.width+x-1)*4]+2*(img_data.data[((y)*canvas.width+x-1)*4])+img_data.data[((y+1)*canvas.width+x-1)*4]);

                                  let G=Math.ceil(Math.sqrt(G_x*G_x+G_y*G_y));

                                  let tetha = Math.atan2(G_y,G_x);

                                    if(G > 255 || G < 0)
                                        {
                                           G = 255
                                        }

                                  img_data2.data[(y*canvas.width+x)*4] = G;
                                  img_data2.data[(y*canvas.width+x)*4+1] = G;
                                  img_data2.data[(y*canvas.width+x)*4+2] = G;
                                  img_data2.data[(y*canvas.width+x)*4+3] = 255;
                          }
                  }

                //console.log(img_data2);
                ctx3.putImageData(img_data2, 0, 0, 0, 0, canvas3.width, canvas3.height);

                ctx.fillText("Нормальная", 20, 50);
                ctx2.fillText("Серые тона", 20, 50);
                ctx3.fillText("Оператор Собеля", 20, 50);
                }
        </script>
    </body>
</html>