Tutorial/answer.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>Image Processing</title>

    </head>

    <body>
        <h1>Image Processing!</h1>

        <canvas id="canvas" style="border: solid thin black;"></canvas>
        <canvas id="canvas_result"  style="border: solid thin black;"></canvas>

        <br>
        <button onclick="process();" style="margin-left: 90px; font-size: 20px;">process!</button>

    <script type="text/javascript">
        let image = new Image();
        var src = "imori.jpg";
        image.src = src;
        const canvas = document.getElementById("canvas");
        const ctx = canvas.getContext("2d");
        const canvas_result = document.getElementById("canvas_result");
        const ctx_result = canvas_result.getContext("2d");
        image.onload = () => {
            canvas.width = image.width;
            canvas.height = image.height;
            
            ctx.drawImage(image, 0, 0, canvas.width, canvas.height);

            canvas_result.width = image.width;
            canvas_result.height = image.height;
        }

        function process(){

            let src = ctx.getImageData(0, 0, image.width, image.height);
            let dst = ctx_result.createImageData(image.width, image.height);

            // copy and exchange R with B
            for (var i = 0; i < src.data.length; i += 4){

                x = (i / 4) % image.width;
                y = Math.floor((i / 4) / image.width);

                if ((x < image.width / 2) && (y < image.height / 2)){
                    dst.data[i] = src.data[i+2];
                    dst.data[i+2] = src.data[i];
                }
                else {
                    dst.data[i] = src.data[i];
                    dst.data[i+2] = src.data[i+2];
                }

                dst.data[i+1] = src.data[i+1];
                dst.data[i+3] = src.data[i+3];
            }

            // exchange R and B

            ctx_result.putImageData(dst, 0, 0);
        }
    
    </script>

    </body>
</html>