鏡像効果を実現する JavaScript キャンバス

この記事では、JavaScriptキャンバスでミラーイメージ効果を実現するための具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

<!DOCTYPE html>
<html>
    <ヘッド>
        <メタ文字セット="utf-8">
        <title>画像の使用</title>
        <スタイル タイプ="text/css">
            * {
                /* マージン: 0;
                パディング: 0; */
                ボックスのサイズ: 境界線ボックス;
            }
            キャンバス {
                /* 境界線の幅: 1px;
                境界線の色: #000000;
                境界線スタイル: solid; */
            }
        </スタイル>
    </head>
    <本文>
        <キャンバスid="キャンバス"></キャンバス>
        <canvas id="ミラー"></canvas>
        
        <div>
            <input type="file" accept="image/*" />
        </div>
        
        <script type="text/javascript">
            window.onload = (イベント) => {
                主要（）
            }
            
            関数main() {
                定数キャンバス = document.getElementById("キャンバス");
                ミラーは document.getElementById("ミラー");
                const ctx = canvas.getContext("2d");
                定数 mirrorCtx = mirror.getContext("2d");
                
                定数 inputFile = document.querySelector("input[type=file]");
                inputFile.onchange = (イベント) => {
                    const ファイル = event.target.files;
                    ファイルの長さが 0 より大きい場合
                        const file = files[0]; // 最初のファイル
                        console.log(ファイル);
                        
                        定数image = 新しいImage();
                        image.src = URL.createObjectURL(ファイル);
                        image.onload = 関数(イベント) {
                            // console.log(イベント、これ);
                            URL.revokeObjectURL(this.src);
                            
                            キャンバスの幅 = 画像の幅;
                            キャンバスの高さ = 画像の高さ;
                            ミラーの幅 = 画像の幅;
                            ミラーの高さ = イメージの高さ;
                            
                            ctx.drawImage(画像, 0, 0);
                            
                            const 空の ImageData = ctx.createImageData(canvas.width, canvas.height);
                            const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
                            
                            // console.log(getPixel(imageData, 0, 0));
                            // console.log(getPixel(imageData, 0, 5));
                            // console.log(getPixel(imageData, 0, 9));
                            // console.log(getColor(imageData, 0, 0, "R"));
                            // console.log(getColor(imageData, 0, 5, "G"));
                            // console.log(getColor(imageData, 0, 9, "B"));
                            
                            // コンソールログ(画像データ);
                            
                            // const uint8ClampedArray = imageData.data;
                            // uint8ClampedArray.length = imageData.width * imageData.height * 4;
                            コンソールにログ出力します。
                            for(h = 0; h < imageData.height; h++) {
                                for(let w = 0; w < imageData.width; w++) {
                                    const ピクセル = getPixel(imageData, h, imageData.width - w - 1);
                                    setPixel(空の画像データ、h、w、ピクセル);
                                }
                            }
                            mirrorCtx.putImageData(空のImageData, 0, 0);
                            
                            console.log(画像データ、空の画像データ);
                            
                            関数 getPixel(imageData, 行, 列) {
                                const uint8ClampedArray = imageData.data;
                                定数幅 = imageData.width;
                                定数height = imageData.height;
                                定数ピクセル = [];
                                for(i = 0; i < 4; i++) {
                                    ピクセルをpush(uint8ClampedArray[行 * 幅 * 4 + 列 * 4 + i]);
                                }
                                ピクセルを返します。
                            }
                            
                            関数setPixel(imageData, 行, 列, ピクセル) {
                                const uint8ClampedArray = imageData.data;
                                定数幅 = imageData.width;
                                定数height = imageData.height;
                                for(i = 0; i < 4; i++) {
                                    uint8ClampedArray[行 * 幅 * 4 + 列 * 4 + i] = ピクセル[i];
                                }
                            }
                            
                            // 関数 getColor(imageData, 行, 列, 色) {
                            // const ピクセル = getPixel(imageData, 行, 列);
                            // スイッチ(色) {
                            // ケース "R":
                            // ピクセル[0]を返します。
                            // ケース "G":
                            // ピクセル[1]を返します。
                            // ケース "B":
                            // ピクセル[2]を返します。
                            // ケース "A":
                            // ピクセル[3]を返します。
                            // }
                            // null を返します。
                            // }
                        }
                    }
                }
            }
        </スクリプト>
    </本文>
</html>

参考: リンク

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: