マウスクリックした画像の座標を表示しカラーコードをクリップボードにするJavaScript

プログラム

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>画像クリックカラーコード取得</title>
    <style>
        #coordinates {
            position: fixed;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            background-color: white;
            border: 1px solid black;
            padding: 5px;
            z-index: 1000;
        }
    </style>
</head>
<body>
    <input type="file" id="fileInput">
    <br>
    <img id="uploadedImage" style="max-width: 100%; display: none;">
    <p id="coordinates" style="display: none;"></p>
    <button id="copyButton" style="display: none;">カラーコードをコピー</button>
    <br>
    <label><input type="radio" name="colorFormat" id="hexRadio" value="hex" checked> 16進数</label>
    <label><input type="radio" name="colorFormat" id="rgbRadio" value="rgb"> RGB</label>

    <script>
        const fileInput = document.getElementById('fileInput');
        const uploadedImage = document.getElementById('uploadedImage');
        const coordinates = document.getElementById('coordinates');
        const copyButton = document.getElementById('copyButton');
        const hexRadio = document.getElementById('hexRadio');
        const rgbRadio = document.getElementById('rgbRadio');

        fileInput.addEventListener('change', function(event) {
            const file = event.target.files[0];
            const reader = new FileReader();
            reader.onload = function(e) {
                uploadedImage.src = e.target.result;
                uploadedImage.style.display = 'block';
            };
            reader.readAsDataURL(file);
        });

        uploadedImage.addEventListener('click', function(event) {
            const rect = uploadedImage.getBoundingClientRect();
            const x = event.clientX - rect.left;
            const y = event.clientY - rect.top;

            const canvas = document.createElement('canvas');
            canvas.width = uploadedImage.width;
            canvas.height = uploadedImage.height;
            const ctx = canvas.getContext('2d');
            ctx.drawImage(uploadedImage, 0, 0, uploadedImage.width, uploadedImage.height);

            const imageData = ctx.getImageData(x, y, 1, 1).data;
            const hexColor = `#${('00' + imageData[0].toString(16)).slice(-2)}${('00' + imageData[1].toString(16)).slice(-2)}${('00' + imageData[2].toString(16)).slice(-2)}`;
            const rgbColor = `rgb(${imageData[0]}, ${imageData[1]}, ${imageData[2]})`;
            
            let colorCode = '';
            if (hexRadio.checked) {
                colorCode = hexColor;
            } else if (rgbRadio.checked) {
                colorCode = rgbColor;
            }

            const coordinatesText = `X: ${x}, Y: ${y}, Color: ${colorCode}`;
            coordinates.textContent = coordinatesText;
            coordinates.style.display = 'block';
            copyButton.style.display = 'block';

            // ビープ音を再生
            const beep = new Audio('data:audio/wav;base64,UklGRigAAABXQVZFZm10IBAAAAABAAEARKwAABCxAgAEABAAZGF0YQAAAAA=');
            beep.play();

            // カラーコードをクリップボードにコピー
            navigator.clipboard.writeText(colorCode).then(function() {
                console.log('カラーコードがクリップボードにコピーされました。');
            }, function(err) {
                console.error('カラーコードのクリップボードへのコピーに失敗しました: ', err);
            });
        });

        copyButton.addEventListener('click', function() {
            // クリップボードにコピー
            const text = coordinates.textContent.split(', ')[2].split(': ')[1];
            navigator.clipboard.writeText(text).then(function() {
                console.log('カラーコードがクリップボードにコピーされました。');
            }, function(err) {
                console.error('カラーコードのクリップボードへのコピーに失敗しました: ', err);
            });
        });
    </script>
</body>
</html>
画像クリックカラーコード取得

JavaScript

Posted by eightban