部分ズーム機能付きのポップアップ画像を表示し、ユーザーが画像内の特定の場所の色情報を取得し、それをボタンの背景色として設定する

by 一騎土井

部分ズーム機能付きポップアップ画像

　

　

　

　

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>部分ズーム機能付きポップアップ画像</title>
<style>
    .popup {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        justify-content: center;
        align-items: flex-start;
        z-index: 1000; /* ポップアップを最前面に表示 */
    }

    .popup-content {
        position: relative;
        display: inline-block; /* ズームエリアの位置調整のため */
    }

    .popup img {
        max-width: 500px; /* ポップアップ内の画像サイズを制限 */
        height: auto;
    }

    .zoomed-area {
        display: none;
        position: absolute;
        border: 2px solid #000;
        border-radius: 50%;
        overflow: hidden;
        width: 100px;
        height: 100px;
        pointer-events: none; /* イベントを画像に透過させる */
    }

    .color-button {
        background-color: transparent;
        border: 1px solid #000;
        color: #000;
        padding: 5px 10px;
        cursor: pointer;
    }
</style>
</head>
<body>

<input type="file" id="imageInput" accept="image/*">
<button onclick="showPopup()">カラーピッカーボタン</button>

<div class="popup" id="imagePopup">
    <div class="popup-content">
        <img id="popupImage" src="" alt="ポップアップ画像">
        <div class="zoomed-area" id="zoomedArea"></div>
        <button class="color-button" onclick="getColor()">色情報を取得</button>
        <button onclick="applyColorAndClosePopup()">OK</button>
    </div>
</div>

<script>
let selectedColor = '';
let isColorButtonEnabled = true;

document.getElementById('popupImage').addEventListener('click', function() {
    if (isColorButtonEnabled) {
        getColor(event);
    }
});

document.getElementById('popupImage').addEventListener('touchstart', function() {
    if (isColorButtonEnabled) {
        getColor(event);
    }
});

function showPopup() {
    document.getElementById('imagePopup').style.display = 'flex';
}

document.getElementById('imageInput').addEventListener('change', function(event) {
    const reader = new FileReader();
    reader.onload = function(e) {
        const popupImage = document.getElementById('popupImage');
        popupImage.src = e.target.result;
        applyZoomFeature(popupImage);
    };
    reader.readAsDataURL(event.target.files[0]);
});

function applyZoomFeature(image) {
    const zoomedArea = document.getElementById('zoomedArea');
    const zoomFactor = 2; // ズーム倍率

    image.addEventListener('mousemove', function(e) {
        const rect = image.getBoundingClientRect();
        let x = e.clientX - rect.left;
        let y = e.clientY - rect.top;

        x = Math.max(0, Math.min(x));
        y = Math.max(0, Math.min(y));

        zoomedArea.style.display = 'block';
        zoomedArea.style.left = `${x - zoomedArea.offsetWidth / 2}px`;
        zoomedArea.style.top = `${y - zoomedArea.offsetHeight / 2}px`;

        const bgPosX = -(x * zoomFactor - zoomedArea.offsetWidth /2);
        const bgPosY = -(y * zoomFactor - zoomedArea.offsetHeight / 2);
 
        zoomedArea.style.backgroundImage = `url('${image.src}')`;
        zoomedArea.style.backgroundRepeat = 'no-repeat';
        zoomedArea.style.backgroundSize = `${image.width * zoomFactor}px ${image.height * zoomFactor}px`;
        zoomedArea.style.backgroundPosition = `${bgPosX}px ${bgPosY}px`;
    });

    image.addEventListener('mouseout', function() {
        zoomedArea.style.display = 'none';
    });
}

function getColor(event) {
    const popupImage = document.getElementById('popupImage');
    const rect = popupImage.getBoundingClientRect();
    let x = event.clientX - rect.left;
    let y = event.clientY - rect.top;

    // 画像のスケールを考慮して座標を調整
    const scaleWidth = popupImage.naturalWidth / popupImage.width;
    const scaleHeight = popupImage.naturalHeight / popupImage.height;
    x = Math.round(x * scaleWidth);
    y = Math.round(y * scaleHeight);

    const canvas = document.createElement('canvas');
    canvas.width = popupImage.naturalWidth;
    canvas.height = popupImage.naturalHeight;
    const context = canvas.getContext('2d');
    context.drawImage(popupImage, 0, 0, canvas.width, canvas.height);

    const pixelData = context.getImageData(x, y, 1, 1).data;
    const color = `rgb(${pixelData[0]}, ${pixelData[1]}, ${pixelData[2]})`;

    selectedColor = color;
    document.querySelector('.color-button').style.backgroundColor = selectedColor;
}

function applyColorAndClosePopup() {
    const colorPickerButton = document.querySelector('.color-button');
    document.querySelector('button[onclick="showPopup()"]').style.backgroundColor = selectedColor;
    closePopup();
}

function closePopup() {
    document.getElementById('imagePopup').style.display = 'none';
}
</script>

</body>
</html>
sample programに戻る