1.图片放大预览

src/main/webapp/HG/WD/HGWD002.jsp

@@ -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>

src/main/webapp/HG/WD/HGWD002A.css

@@ -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;
+}

src/main/webapp/HG/WD/HGWD002A.js

@@ -52,7 +52,7 @@ $(function () {
  */
 $(window).load(function () {
 	// 鼠标滚动
-	imageMouseListener();
+	// imageMouseListener();
 });
 
 /**

src/main/webapp/HG/WD/HGWD002A.jsp

@@ -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>

src/main/webapp/HG/WD/HGWD002A1.js

@@ -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();
+}