こんにちは。フリーランス・コンサルタント＆エンジニアの九保すこひです。

X（Twitter）やってます！
九保すこひ＠フリーランスエンジニア｜累計300万PVのブログ運営中

さてさて、私はファッションが得意ではありませんが、少しでも多くの人に印象を残したいということでボトム（パンツ？）の色は赤で固定にしています。（赤は好きですし、ホント見た目に特徴がないので…）

これは、たくさんエネルギーを使うと言われている「意思決定」を日常から少しでも減らす役割もあります。（スティーブ・ジョブズが同じ服を着てたのは、これと同じ理由からだという説がありますよね）

それは良いのですが、先ほど言いましたとおりファッションに明るくないので、ネットショッピングをしていて困ることがあります。

それは・・・・・・「赤いボトムの写真」でしか、

仕上がりがイメージができない😅

ことです。

そのため、これまではいちいち画像をダウンロードして画像ソフトでボトムを赤に塗り直して確認していました。

しかし、それは果てしなくめんどくさいんです…。

そこで❗

せっかくエンジニアなので何かできないだろうか、と考えていたところ思いつきました。

Canvas を使えばできるじゃないか

と。

そこで❗

今回はJavaScript + Canvasで「指定した色だけ塗りつぶすことができる」機能をつくってみたいと思います。

ぜひ何かの参考になりましたら嬉しいです😄✨

「2021年の累計PVが
100万を超えました❗
皆さんホントにいつも
ありがとうございます✨」

開発環境： Vue 3

1 やりたいこと
2 実際のコード
3 テストしてみる
4 デモをつくりました
5 企業様へのご提案
6 おわりに

やりたいこと

では、まずはやりたいことですが、以下４点になります。

画像ファイルを選択してプレビュー表示する
対象にする色、塗りつぶす色は変更できる
画像上をダブルクリックするとその色を取得できる
選択した色に「近い色」だけ塗りつぶす

では、実際に作業に移りましょう❗

実際のコード

今回はJavaScript + HTMLだけですので、１ファイルで完了できます。
まずは実際のコードです。

<html>
<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>

        #canvas {

            cursor: crosshair;

        }

    </style>
</head>
<body>
<div id="app" class="p-5">
    <div class="h3">キャンバスの特定色を変更するサンプル</div>
    <label class="btn btn-primary">
        画像を選択する
        <input type="file" accept="image/*" class="d-none" @change="onFileChange">
    </label>
    <hr>
    プレビュー画像<br>
    <canvas
        id="canvas"
        class="mb-5"
        width="0"
        height="0"
        @dblclick="onCanvasDoubleClick($event)"
        @mousedown="onMouseDown"
        @mouseup="onMouseUp"
        @mousemove="onMouseMove($event)"></canvas>
    <div class="row">
        <div class="col-3">
            <div class="h5">どの色を？</div>
            <input type="color" v-model="colors.from">
            <br>
            <small>
                画像上をダブルクリックすると色を取得できます。
            </small>
        </div>
        <div class="col-3">
            <div class="h5">どの色へ変える？</div>
            <input type="color" v-model="colors.to">
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/vue@3.1.1/dist/vue.global.prod.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script>

    Vue.createApp({
        data() {
            return {
                canvas: null,
                ctx: null,
                colors: {
                    from: '#ffffff',
                    to: '#BC0C23'
                },
                threshold: 30, // 各色がプラスマイナスこの数字以内なら「似ている」と判断する,
                drawingLength: 30, // 色を変える範囲（px）
                isDragging: false
            }
        },
        methods: {
            isSimilarColor(color1, color2) { // ① 色が似ているかどうかチェックする

                const keys = ['red', 'green', 'blue'];
                let results = [];

                keys.forEach(key => {

                    const colorPart1 = color1[key];
                    const colorPart2 = color2[key];
                    const minColor = colorPart1 - this.threshold;
                    const maxColor = colorPart1 + this.threshold;
                    const result = (colorPart2 >= minColor && colorPart2 <= maxColor);
                    results.push(result);

                });

                return !results.includes(false);

            },
            onFileChange(e) { // ② ファイルが選択されたら画像をプレビュー表示する

                const files = e.target.files;

                if(files.length > 0) {

                    const file = files[0];
                    const reader = new FileReader();
                    reader.onload = e => {

                        let image = new Image();
                        image.onload = () => {

                            const width = image.width;
                            const height = image.height;
                            this.canvas.width = width;
                            this.canvas.height = height;
                            this.ctx.drawImage(image, 0, 0, width, height);

                        }
                        image.src = e.target.result;

                    };
                    reader.readAsDataURL(file);

                }

            },
            onCanvasDoubleClick(e) { // ③ プレビュー画像上をダブルクリックされたら、その位置の色を取得する

                const x = e.layerX;
                const y = e.layerY;
                const imageData = this.ctx.getImageData(x, y, 1, 1);
                this.colors.from = this.rgbToHex(imageData.data[0], imageData.data[1], imageData.data[2]);
                window.getSelection().empty();

            },
            onMouseDown() { // ④ マウスが押されたら、マウスドラッグ中

                this.isDragging = true;

            },
            onMouseUp() { // ④ マウスが離されたら、マウスドラッグ中ではない

                this.isDragging = false;

            },
            onMouseMove(e) { // ⑤ マウスドラッグ中に移動したら、対象の色のみ変更する

                if(this.isDragging === true) {

                    const drawingLength = this.drawingLength;
                    const mouseX = e.layerX;
                    const mouseY = e.layerY;
                    const minX = Math.max(0, mouseX - drawingLength);
                    const maxX = Math.min(this.canvas.width, mouseX + drawingLength);
                    const minY = Math.max(0, mouseY - drawingLength);
                    const maxY = Math.min(this.canvas.height, mouseY + drawingLength);

                    for(let x = minX ; x <= maxX ; x++) {

                        for(let y = minY ; y <= maxY ; y++) {

                            const imageData = this.ctx.getImageData(x, y, 1, 1);
                            const currentColors = {
                                red: imageData.data[0],
                                green: imageData.data[1],
                                blue: imageData.data[2]
                            };
                            const fromColors = this.hexToRgb(this.colors.from);
                            const toColors = this.hexToRgb(this.colors.to);

                            if(this.isSimilarColor(currentColors, fromColors)) {

                                imageData.data[0] = toColors.red;
                                imageData.data[1] = toColors.green;
                                imageData.data[2] = toColors.blue;
                                this.ctx.putImageData(imageData, x, y);

                            }

                        }

                    }

                }

            },

            // ⑥ 16進数 ↔ RGB 変換
            // from https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
            hexToRgb(hex) {

                const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);

                if(result) {

                    return {
                        red: parseInt(result[1], 16),
                        green: parseInt(result[2], 16),
                        blue: parseInt(result[3], 16)
                    };

                }

                return null;

            },
            rgbToHex(r, g, b) {

                return '#' + ((1 << 24) + (r << 16) + (g << 8) + b)
                    .toString(16)
                    .slice(1);

            }
        },
        mounted() {

            // ⑦ どこからでもCanvasにアクセスできるように変数へ格納する
            this.canvas = document.querySelector('#canvas');
            this.ctx = this.canvas.getContext('2d');

        }
    }).mount('#app');

</script>
</body>
</html>

では、少しコードが長いのでひとつずつ見ていきましょう❗

① 色が似ているかどうかチェックする

ここで、color1とcolor2が「近い色なのかどうか」をチェックしています。

実際には、RBG３つの値がしきい値（今回は±30）の範囲内に入っていれば似ていると判別しています。

そのため、thresholdを変更することでこの判別の強弱を設定することができます。

なお、最後の!results.includes()は、RBGチェックの結果 ひとつでもfalseが入っていれば、falseが帰るようになっています。

例えば、以下のようなパターンになります。

[false, false, false] → もちろん false
[false, true, false] → ２つも false があるので false
[false, true, true] → おしいけど、１つ false があるので false
[true, true, true] → これだけ true ✨