Commit 4dd7bc24 by 宋祥

1.图片放大预览

parent 6f6d69b1
......@@ -83,14 +83,12 @@
<div id="docxContainer" style="display: none;"></div>
<%-- IMAGE文件预览--%>
<div id="imageContainer" class="left-flex" style="display: none;">
<%-- <div class="wide-div">--%>
<img id="image" src="" style="border: 1px solid gray;"/>
<%-- </div>--%>
<%-- <div class="narrow-div">--%>
<%-- <input type="range" id="zoom-slider" class="zoom-slider" min="10" max="300" value="100"--%>
<%-- oninput="zoomImage(this.value)">--%>
<%-- </div>--%>
<img id="image" src="" style="border: 1px solid gray;width: 100%;height: 100%;"/>
</div>
<%-- other --%>
<iframe id="previewFrame" src="" style="display: none;"></iframe>
</EF:EFWindow>
<%-- 图片放大区域 --%>
<div id="imageOuterDiv" class="imageOuterDiv">
<img id="bigImage" src=""/>
</div>
......@@ -43,3 +43,14 @@ img:hover {
.textSpan table td {
border: 1px solid black;
}
.imageOuterDiv {
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.7);
z-index: 9999999;
width: 100%;
height: 100%;
display: none;
}
......@@ -52,7 +52,7 @@ $(function () {
*/
$(window).load(function () {
// 鼠标滚动
imageMouseListener();
// imageMouseListener();
});
/**
......
......@@ -36,13 +36,7 @@
<div id="docxContainer" style="display: none;"></div>
<%-- IMAGE文件预览--%>
<div id="imageContainer" class="left-flex" style="display: none;">
<%-- <div class="wide-div">--%>
<img id="image" src="" style="border: 1px solid gray;"/>
<%-- </div>--%>
<%-- <div class="narrow-div">--%>
<%-- <input type="range" id="zoom-slider" class="zoom-slider" min="10" max="300" value="100"--%>
<%-- oninput="zoomImage(this.value)">--%>
<%-- </div>--%>
<img id="image" src="" style="border: 1px solid gray;width: 100%;height: 100%;"/>
</div>
<%-- other --%>
<iframe id="previewFrame" src="" style="display: none;"></iframe>
......@@ -50,3 +44,7 @@
</div>
</div>
</EF:EFPage>
<%-- 图片放大区域 --%>
<div id="imageOuterDiv" class="imageOuterDiv">
<img id="bigImage" src=""/>
</div>
......@@ -49,7 +49,7 @@ function previewFile(docId, docType) {
} else if (isWord(docType)) {
previewDocx(docId);
} else if (isImage(docType)) {
previewFrame(docId);
previewImage(docId);
} else if (isFrame(docType)) {
previewFrame(docId);
} else {
......@@ -96,8 +96,13 @@ function previewText(docId) {
let container = document.getElementById("textContainer");
container.style.display = 'block';
// 使用new TextDecoder()指定编码
// const utf8Decoder = new TextDecoder('UTF-8', {ignoreBOM: true});
// const decodedText = utf8Decoder.decode(arrayBuffer);
// let textDecoder;
// try {
// textDecoder = new TextDecoder('UTF-8', {ignoreBOM: true});
// } catch (e) {
// textDecoder = new TextDecoder('GBK', {ignoreBOM: true});
// }
// let dataDecoder = textDecoder.decode(data);
$("#textSpan").text(data);
});
}
......@@ -277,3 +282,214 @@ function otherDownload(isRoot, docId) {
// + "' target='_blank'>下载</a>");
}
}
/**
* 实现图片点击放大、拖拽、滚轴滚动焦点缩放功能,相关参数、函数声明
*/
let imgWidth, imgHeight; // 图片点击放大初始尺寸参数
let maxZoom = 4; //最大缩放倍数
let minReduce = 0.5; // 最小缩放倍数
let initScale = 1; //滚动缩放初始倍数,并不是图片点击放大的倍数
let isPointerdown = false; //鼠标按下的标识
//记录鼠标按下坐标和按下移动时坐标
let lastPointermove = {
x: 0,
y: 0,
};
//移动过程从上一个坐标到下一个坐标之间的差值
let diff = {
x: 0,
y: 0,
};
//图片放大后左上角的坐标,主要结合diff参数用于鼠标焦点缩放时图片偏移坐标
let x = 0;
let y = 0;
// 记录节点
let imageOuterDiv = null;
let realImage = null;
let bigImage = null;
window.onload = function () {
imageOuterDiv = document.querySelector("#imageOuterDiv");
realImage = document.querySelector("#image");
bigImage = document.querySelector("#bigImage");
// 添加事件监听器来拦截右键点击事件
document.addEventListener('contextmenu', function (e) {
// 阻止默认的右键菜单
e.preventDefault();
});
document.getElementById("image").addEventListener("click", (e) => {
const that = e.target;
bigImage.style.transform = "scale(1)";
// 图片放大展示函数调用
clickImageShow(that);
// 监听鼠标滚动事件
window.addEventListener("wheel", handleStopWheel, {
passive: false,
});
// 拖转事件调用
imgDrag();
});
};
/**
* 点击图片放大
*/
function clickImageShow(that) {
let src = that.getAttribute("src");
fetch(src).then(response => {
if (!response.ok) {
throw new Error('Network response was not ok ' + response.statusText);
}
return response.blob();
}).then(blob => {
// 创建一个指向Blob的URL
bigImage.setAttribute("src", URL.createObjectURL(blob));
// 展示大图
imageShow();
}).catch(error => {
console.error('There has been a problem with your fetch operation:', error);
});
}
/**
* 放大图片展示
*/
function imageShow() {
// 设置尺寸和调整比例
let windowW = document.documentElement.clientWidth;
let windowH = document.documentElement.clientHeight;
let realWidth = realImage.naturalWidth; //获取图片的原始宽度
let realHeight = realImage.naturalHeight; //获取图片的原始高度
let outsideScale = 0.8;
let belowScale = 1.4;
let realRatio = realWidth / realHeight;
let windowRatio = windowW / windowH;
// 说明:下面是我自己的一些判断逻辑,大致意思就是图片的真实尺寸大于屏幕尺寸则使用屏幕尺寸,如果小于屏幕尺寸就使用自己本身的尺寸;并根据大于或者小于的比例对图片的尺寸进一步调整。coder可以根据自己的要求进行修改。
if (realRatio >= windowRatio) {
if (realWidth > windowW) {
imgWidth = windowH * outsideScale;
imgHeight = (imgWidth / realWidth) * realHeight;
} else {
if (realWidth * belowScale < windowW) {
imgWidth = realWidth * (belowScale - 0.2);
imgHeight = (imgWidth / realWidth) * realHeight;
} else {
imgWidth = realWidth;
imgHeight = realHeight;
}
}
} else {
if (realHeight > windowH) {
imgHeight = windowH * outsideScale;
imgWidth = (imgHeight / realHeight) * realWidth;
} else {
if (realHeight * belowScale < windowW) {
imgHeight = realHeight * (belowScale - 0.2);
imgWidth = (imgHeight / realHeight) * realWidth;
} else {
imgWidth = realWidth;
imgHeight = realHeight;
}
}
}
//设置放大图片的尺寸、偏移量并展示
bigImage.style.width = imgWidth + "px";
bigImage.style.height = imgHeight + "px";
x = (windowW - imgWidth) * 0.5;
y = (windowH - imgHeight) * 0.5;
bigImage.style.transform = `translate3d(${x}px, ${y}px, 0)`;
imageOuterDiv.style.display = "block";
// 点击蒙版及外面区域放大图片关闭
imageOuterDiv.onclick = () => {
imageOuterDiv.style.display = "none";
initScale = 1;
window.removeEventListener("wheel", handleStopWheel);
};
// 阻止事件冒泡
bigImage.onclick = (e) => {
e.stopPropagation();
};
}
/**
* 鼠标滚轮
*
* @param e
*/
function handleStopWheel(e) {
let itemSizeChange = 1.1; //每一次滚动放大的倍数
if (e.target.id == "bigImage") {
// 说明:e.dataY如果大于0则表示鼠标向下滚动,反之则向上滚动,这里设计为向上滚动为放大,向下滚动为缩小
if (e.deltaY > 0) {
itemSizeChange = 1 / 1.1;
}
let _initScale = initScale * itemSizeChange;
// 说明:在超过或低于临界值时,虽然让initScale等于maxZoom或minreduce,但是在后续的判断中放大图片的最终倍数并没有达到maxZoom或minreduce,而是跳过。
if (_initScale > maxZoom) {
initScale = maxZoom;
} else if (_initScale < minReduce) {
initScale = minReduce;
} else {
initScale = _initScale;
}
const origin = {
x: (itemSizeChange - 1) * imgWidth * 0.5,
y: (itemSizeChange - 1) * imgHeight * 0.5,
};
// 计算偏移量
if (_initScale < maxZoom && _initScale > minReduce) {
x -= (itemSizeChange - 1) * (e.clientX - x) - origin.x;
y -= (itemSizeChange - 1) * (e.clientY - y) - origin.y;
e.target.style.transform = `translate3d(${x}px, ${y}px, 0) scale(${initScale})`;
}
}
// 阻止默认事件
e.preventDefault();
}
function imgDrag() {
// 绑定 鼠标按下事件
bigImage.addEventListener("pointerdown", pointerdown);
// 绑定 鼠标移动事件
bigImage.addEventListener("pointermove", pointermove);
bigImage.addEventListener("pointerup", function (e) {
if (isPointerdown) {
isPointerdown = false;
}
});
bigImage.addEventListener("pointercancel", function (e) {
if (isPointerdown) {
isPointerdown = false;
}
});
}
function pointerdown(e) {
isPointerdown = true;
// 说明:Element.setPointerCapture()将特定元素指定为未来指针事件的捕获目标。指针的后续事件将以捕获元素为目标,直到捕获被释放。可以理解为:在窗口不是全屏情况下,我在拖动放大图片时即使鼠标移出可窗口之外,此时事件还是捕获在该放大图片上。
bigImage.setPointerCapture(e.pointerId);
lastPointermove = {
x: e.clientX,
y: e.clientY,
};
}
function pointermove(e) {
if (isPointerdown) {
const current1 = {
x: e.clientX,
y: e.clientY,
};
diff.x = current1.x - lastPointermove.x;
diff.y = current1.y - lastPointermove.y;
lastPointermove = {
x: current1.x,
y: current1.y,
};
x += diff.x;
y += diff.y;
bigImage.style.transform = `translate3d(${x}px, ${y}px, 0) scale(${initScale})`;
}
e.preventDefault();
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment