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

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; /* イベントを画像に透過させる */
    }
</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>
    </div>
</div>

<script>
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, image.width - zoomedArea.offsetWidth / zoomFactor));
        y = Math.max(0, Math.min(y, image.height - zoomedArea.offsetHeight / zoomFactor));

        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';
    });
}
</script>

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