<html>
<body>
<button onclick="imagePreview('http://www.51c-dev.com/upload/20250109/677fadf670fe1.jpg')">查看</button>
<script>
/**
* 图片预览函数，调用后自动预览图片
* @param {图片地址} imgurl
*/
//图片预览函数，调用后自动预览图片
//调用 imagePreview(图片地址)
function imagePreview(imgurl) {
if (!imgurl) return;
//定义参数
const max = 20;//放缩原图倍数
const scale = 0.1;//滚轮一下缩放的变化比例 越大放缩越快
//定义对象
const box = document.createElement("div");
box.style.cssText = "position: fixed;top:0px;left:0px;z-index: 10000;background-color: rgba(0,0, 0, 0.5);width:100%;height:100%;overflow: hidden;cursor: grab; -webkit-transition: all .3s ease;-moz-transition: all .3s ease;-o-transition: all .3s ease;transition: all .3s ease;opacity:0;";
const img = document.createElement("img");
img.style.cssText = "position: absolute;object-fit: contain;user-select: none;-webkit-user-drag: none;user-select: none;-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none; ";
img.src = imgurl;
img.title = "预览";
const close = document.createElement("div");
close.innerHTML =`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="currentColor" d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"></path></svg>`;
close.style.cssText = "position: absolute;top:25px;right:25px;align-items: center;color:white;display: flex;justify-content: center;background: rgba(29,29,37,0.4);border-radius: 50%;width:45px;height:45px;padding:8px; box-sizing: border-box;";
//关闭
//close.onclick = () => {
//document.body.removeChild(box);
//}
box.append(img);
box.append(close);
document.body.append(box);
setTimeout(res=>{
box.style.opacity = 1;
},100);
//阻止冒泡
img.onclick = (event) => {
event.stopPropagation();
}
//点击容器关闭
box.onclick = () => {
box.style.opacity = 0;
setTimeout(res=>{
document.body.removeChild(box);
},300);
}
/**
* 图片已加载完毕后,对图片居中
* 图片一开始其实默认是居中的，只不过是img的object-fit: contain属性进行了居中，并且产生了一些边缘填充空白
* 这些填充的空白会影响后续图片拖拽的计算，因此需要将img修改成图片展示的真实大小，但对用户视觉不发生改变。
*/
img.onload = function () {
const imgRatio = img.naturalWidth / img.naturalHeight; //图片横纵比
const boxRatio = box.clientWidth / box.clientHeight; //容器横纵比
/**
* 因为拿到的图片真实大小，不是显示大小，需要手动放缩，适配到容器中
* 当图片横纵比大于容器横纵比，图片保持比例的情况下填充容器，此时只能对图片的横向放缩填充全部容器
* 当图片横纵比小于容器横纵比，图片保持比例的情况下填充容器，此时只能对图片的纵向放缩填充全部容器
* 这个规律可以自己画图试验一下
*/
if (imgRatio > boxRatio) {
const scale = box.clientWidth / img.naturalWidth;
img.style.width = box.clientWidth+"px"; //长度填充
img.style.height = img.naturalHeight * scale+"px"; //高度自适应
img.style.top = Math.ceil((box.clientHeight - img.clientHeight) / 2) + "px";//位置居中
} else {
const scale = box.clientHeight / img.naturalHeight;
img.style.height = box.clientHeight+"px";//高度填充
img.style.width = img.naturalWidth * scale+"px";//长度自适应
img.style.left = Math.ceil((box.clientWidth - img.clientWidth) / 2) + "px";//位置居中
}
};
//用于元素拖拽时边界的参数限制，入参：{ 实际值，左区间，右区间 }
const getRange = (actual, limita, limitb) => {
if (actual < -limita) {
return -limita;
} else if (actual > limitb) {
return limitb;
}
return actual;
}
//缩放操作
box.onwheel = (event) => {
console.log(event)
event.preventDefault(); //关闭默认事件
const center_x = event.clientX;
const center_y = event.clientY;
const wheelDelta = event.deltaY;
const top_d = center_y - img.offsetTop;
const left_d = center_x - img.offsetLeft;
if (wheelDelta > 0) {//缩小 往后推滚轮 【滚轮值和缩放关系不是固定的，你也可以反过来】
let modifyHeight = img.clientHeight * (1 - scale);
let modifyWidth = img.clientWidth * (1 - scale);
if (modifyHeight * max > img.naturalHeight) { //只在比例范围内，放缩
img.style.height = modifyHeight+"px";
img.style.width = modifyWidth+"px";
img.style.top = (center_y - top_d * (1 - scale))+"px";
img.style.left = (center_x - left_d * (1 - scale))+"px";
} else {
console.log("缩小超出" + max * 100 + "%比例无法缩小");
}
} else {//放大 往前推滚轮
let modifyHeight = img.clientHeight * (1 + scale);
let modifyWidth = img.clientWidth * (1 + scale);
if (modifyHeight < img.naturalHeight * max) { //只在比例范围内，放缩
img.style.height = modifyHeight+"px";
img.style.width = modifyWidth+"px";
img.style.top = (center_y - top_d * (1 + scale))+"px";
img.style.left = (center_x - left_d * (1 + scale))+"px";
} else {
console.log("放大超出" + max * 100 + "%比例无法放大");
}
}
}
//拖拽操作
//拖拽需要的全局变量
const drag = {
status: false,
lastX: null,
lastY: null
}
box.onmousedown = (event) => {
document.body.style.userSelect = 'none';
if (event.button === 0) {
//鼠标会移出元素，甚至移出到浏览器外部，使用document监听移动就可以不受影响。
document.onmousemove = (event) => {
if (drag.status) {
let mx = event.clientX - drag.lastX
let my = event.clientY - drag.lastY
drag.lastX = event.clientX
drag.lastY = event.clientY
let top = img.offsetTop + my
let left = img.offsetLeft + mx
//拖拽超出容器外部无意义，可能找不回，因此图片位置不能任意拖拽至少有一个角或一个边在容器内部，这里减10就是预留出的宽度
img.style.left = getRange(left, img.clientWidth - 10, box.clientWidth - 10) + 'px';
img.style.top = getRange(top, img.clientHeight - 10, box.clientHeight - 10) + "px";
}
}
//鼠标松开，初始化操作，如果鼠标在元素外部松开，元素的松开监听是获取不到的，因此需要用document监听
document.onmouseup = (event) => {
document.body.style.userSelect = '';
if (event.button === 0) {
drag.status = false
document.onmousemove = null
document.onmouseup = null
}
}
drag.status = true
drag.lastX = event.clientX
drag.lastY = event.clientY
}
}
}
</script>
</body>
</html>
