From 28a19584dca02f05fe0b8be9ab426b586efead6e Mon Sep 17 00:00:00 2001
From: mitao <2763622819@qq.com>
Date: 星期一, 22 四月 2024 09:33:10 +0800
Subject: [PATCH] 营销员管理-身份证图片放大
---
meiya-admin/src/main/webapp/static/js/common/Feng.js | 99 +++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 99 insertions(+), 0 deletions(-)
diff --git a/meiya-admin/src/main/webapp/static/js/common/Feng.js b/meiya-admin/src/main/webapp/static/js/common/Feng.js
index dcf03c8..ce12f8d 100644
--- a/meiya-admin/src/main/webapp/static/js/common/Feng.js
+++ b/meiya-admin/src/main/webapp/static/js/common/Feng.js
@@ -321,6 +321,105 @@
content: '<img src="' + $(image).attr("src") + '" height="100%" width="100%" />'
});
},
+ lookBigImg: function (obj) {
+ console.log("进入")
+ console.log(obj)
+ // 设置图片路径
+ var imgUrl = obj;
+ if (imgUrl != "") {
+ imgUrl = imgUrl;// 设置图片路径
+ } else {
+ imgUrl = Feng.ctxPath + '/static/img/NoPIC.png';// 默认无图
+ }
+ layer.open({
+ type: 1,
+ title: false,
+ closeBtn: 0,
+ area: ['80%', '100%'],
+ skin: 'layui-layer-nobg', //没有背景色
+ shadeClose: true, //点击空白区域关闭弹出层
+ content: '<div id="zoomableImageContainer" style="height: 100%; width: 100%; overflow: hidden; display: flex; justify-content: center; align-items: center; position: relative;"><img id="zoomableImage" src="'
+ + imgUrl
+ + '" style="max-width: none; max-height: none; position: absolute;"></div>',
+ success: function (layero, index) {
+ // 获取图片容器和图片元素
+ var zoomableImageContainer = document.getElementById(
+ 'zoomableImageContainer');
+ var zoomableImage = document.getElementById('zoomableImage');
+ var imageWidth = zoomableImage.naturalWidth;
+ var imageHeight = zoomableImage.naturalHeight;
+ var containerWidth = zoomableImageContainer.offsetWidth;
+ var containerHeight = zoomableImageContainer.offsetHeight;
+ var isDragging = false; // 标记是否正在拖动
+ var startX, startY; // 记录拖动起始位置
+ zoomableImageContainer.addEventListener('wheel',
+ function (event) {
+ event.preventDefault();
+ var delta = Math.sign(-event.deltaY); // 获取滚动方向，1表示向上滚动，-1表示向下滚动
+ var currentWidth = zoomableImage.offsetWidth;
+ var currentHeight = zoomableImage.offsetHeight;
+ var step = 0.1; // 缩放步长
+ var newWidth = currentWidth + delta * step
+ * currentWidth;
+ var aspectRatio = zoomableImage.naturalWidth
+ / zoomableImage.naturalHeight;
+ var newHeight = newWidth / aspectRatio;
+ zoomableImage.style.width = newWidth + 'px';
+ zoomableImage.style.height = newHeight + 'px';
+ });
+ zoomableImageContainer.addEventListener('mousedown',
+ function (event) {
+ if (event.button === 0) { // 判断是否为鼠标左键点击
+ event.preventDefault();
+ isDragging = true;
+ startX = event.clientX - zoomableImage.offsetLeft;
+ startY = event.clientY - zoomableImage.offsetTop;
+ }
+ });
+ zoomableImageContainer.addEventListener('mousemove',
+ function (event) {
+ if (isDragging) {
+ event.preventDefault();
+ var offsetX = event.clientX - startX;
+ var offsetY = event.clientY - startY;
+ var maxX = zoomableImage.offsetWidth
+ - containerWidth;
+ var maxY = zoomableImage.offsetHeight
+ - containerHeight;
+ offsetX = Math.min(Math.max(offsetX, -maxX), 0);
+ offsetY = Math.min(Math.max(offsetY, -maxY), 0);
+ zoomableImage.style.left = offsetX + 'px';
+ zoomableImage.style.top = offsetY + 'px';
+ }
+ });
+ zoomableImageContainer.addEventListener('mousemove',
+ function (event) {
+ if (isDragging) {
+ var mouseX = event.clientX;
+ var mouseY = event.clientY;
+ var newLeft = mouseX - startX;
+ var newTop = mouseY - startY;
+ // 确保图片不会移出容器范围
+ if (newLeft >= 0 && newLeft
+ + zoomableImage.offsetWidth <= containerWidth) {
+ zoomableImage.style.left = newLeft + 'px';
+ }
+ if (newTop >= 0 && newTop
+ + zoomableImage.offsetHeight
+ <= containerHeight) {
+ zoomableImage.style.top = newTop + 'px';
+ }
+ }
+ });
+ zoomableImageContainer.addEventListener('mouseup',
+ function (event) {
+ if (event.button === 0) {
+ isDragging = false;
+ }
+ });
+ }
+ });
+ },
/**
* 单选框-取值
*/
--
Gitblit v1.7.1