画像アップロードと部分ズーム機能付きポップアップ
部分ズーム機能付きポップアップ画像
部分ズーム後ポップアップは戻りません
戻るのはこちら
<!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>