图片预览、拖拽和缩放组件分享

于 2024-09-11 21:34:22 发布
阅读量710 收藏 13
点赞数 8
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dfc_dfc/article/details/142150793
版权
业务场景

项目中不需要点击小图然后展示大图，类似于elementui中的Image图片组件。适用于直接展示大图，支持拖拽和缩放的场景，比如：用户需要比对两种数据的图片展示，左右两侧进行展示。

效果图

在这里插入图片描述

使用方式

  1. 在components文件中新建image-view文件夹

    <!-- index.vue -->

<!--
 @author: duanfc
 @time: 2024-09-02 12:00:00
 @description: 图片展示组件
 @path: /demo
 @lastChange: duanfc
-->

<template>
	<div class="image-show">
        <!-- ACTIONS -->
        <div class="el-image-viewer__btn el-image-viewer__actions">
            <div class="el-image-viewer__actions__inner">
                <i class="el-icon-zoom-out" @click="handleActions('zoomOut')"></i>
                <i class="el-icon-zoom-in" @click="handleActions('zoomIn')"></i>
                <i class="el-image-viewer__actions__divider"></i>
                <i :class="mode.icon" @click="toggleMode"></i>
                <i class="el-image-viewer__actions__divider"></i>
                <i class="el-icon-refresh-left" @click="handleActions('anticlocelise')"></i>
                <i class="el-icon-refresh-right" @click="handleActions('clocelise')"></i>
            </div>
        </div>
        <!-- CANVAS -->
		<div class="image-viewer__canvas">
			<img
				ref="imgRef"
				class="image-viewer__img"
				:src="currentImg"
				:style="imgStyle"
				@load="handleImgLoad"
				@error="handleImgError"
				@mousedown="handleMouseDown"
			/>
		</div>
	</div>
</template>

<script lang='ts'>
import useCommon from "@/hooks/use-common";
import {
	ref,
	reactive,
	defineComponent,
	onMounted,
	computed,
	toRefs,
} from "@vue/composition-api";
import useResizeSearch from "@/hooks/use-resizeSearch";
import api from "@/api";
import request from "@/axios/fetch";
import { on, off } from "./utils/dom";
import { rafThrottle, isFirefox } from "./utils/util";

const Mode = {
	CONTAIN: {
		name: "contain",
		icon: "el-icon-full-screen",
	},
	ORIGINAL: {
		name: "original",
		icon: "el-icon-c-scale-to-original",
	},
};
const mousewheelEventName = isFirefox() ? "DOMMouseScroll" : "mousewheel";

export default defineComponent({
	name: "imageShow",
	components: {},
	props: {
		url: {
			type: String,
			default: "",
		},
	},
	setup(props) {
		const { proxy } = useCommon(); // 作为this使用
		const { isXLCol } = useResizeSearch();

		const imgRef = ref(null);
		const transform = reactive({
			scale: 1,
			deg: 0,
			offsetX: 0,
			offsetY: 0,
			enableTransition: false,
		});
		const loading = ref(false);
		const mode = ref(Mode.CONTAIN);

		const currentImg = computed(() => {
			return props.url;
		});

		const handleImgLoad = () => {
			loading.value = false;
		};
		const handleImgError = (e) => {
			loading.value = false;
			e.target.alt = "加载失败";
		};
		const handleMouseDown = (e) => {
			if (loading.value || e.button !== 0) return;

			const { offsetX, offsetY } = transform;
			const startX = e.pageX;
			const startY = e.pageY;
			const _dragHandler = rafThrottle((ev) => {
				transform.offsetX = offsetX + ev.pageX - startX;
				transform.offsetY = offsetY + ev.pageY - startY;
			});
			on(imgRef.value, "mousemove", _dragHandler);
			on(imgRef.value, "mouseup", () => {
				off(imgRef.value, "mousemove", _dragHandler);
			});
			e.preventDefault();
		};
		const handleActions = (action, options = {}) => {
			if (loading.value) return;
			const { zoomRate, rotateDeg, enableTransition } = {
				zoomRate: 0.2,
				rotateDeg: 90,
				enableTransition: true,
				...options,
			};
			switch (action) {
				case "zoomOut":
					if (transform.scale > 0.2) {
						transform.scale = parseFloat(
							(transform.scale - zoomRate).toFixed(3)
						);
					}
					break;
				case "zoomIn":
					transform.scale = parseFloat(
						(transform.scale + zoomRate).toFixed(3)
					);
					break;
				case "clocelise":
					transform.deg += rotateDeg;
					break;
				case "anticlocelise":
					transform.deg -= rotateDeg;
					break;
			}
			transform.enableTransition = enableTransition;
		};
		const imgStyle = computed(() => {
			const { scale, deg, offsetX, offsetY, enableTransition } =
				transform;
			const style = {
				transform: `scale(${scale}) rotate(${deg}deg)`,
				transition: enableTransition ? "transform .3s" : "",
				"margin-left": `${offsetX}px`,
				"margin-top": `${offsetY}px`,
                maxWidth: undefined,
                maxHeight: undefined,
			};
			if (mode.value === Mode.CONTAIN) {
				style.maxWidth = style.maxHeight = "100%";
			}
			return style;
		});
		const deviceSupportInstall = () => {
			const _mouseWheelHandler = rafThrottle((e) => {
				e.stopPropagation(); // 阻止事件传播
				const delta = e.wheelDelta ? e.wheelDelta : -e.detail;
				if (delta > 0) {
					handleActions("zoomIn", {
						zoomRate: 0.015,
						enableTransition: false,
					});
				} else {
					handleActions("zoomOut", {
						zoomRate: 0.015,
						enableTransition: false,
					});
				}
			});
			on(imgRef.value, mousewheelEventName, _mouseWheelHandler);
		};
        const reset = () => {
            transform.scale = 1;
            transform.deg = 0;
            transform.offsetX = 0;
            transform.offsetY = 0;
            transform.enableTransition = false;
        }
        const toggleMode = () => {
            if (loading.value) return;
            const modeNames = Object.keys(Mode);
            const modeValues = Object.values(Mode);
            const index = modeValues.indexOf(mode.value);
            const nextIndex = (index + 1) % modeNames.length;
            mode.value = Mode[modeNames[nextIndex]];
            reset();
        }

		onMounted(() => {
			deviceSupportInstall();
		});
		return {
			imgRef,
			currentImg,
			handleImgLoad,
			handleImgError,
			handleMouseDown,
			imgStyle,
            handleActions,
            mode,
            toggleMode,
		};
	},
});
</script>

<style lang="less" scoped>
.image-show {
	height: 100%;
	width: 100%;
    position: relative;
    overflow: hidden;
	.image-viewer__canvas {
		width: 100%;
		height: 100%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		.image-viewer__img {
			height: 100%; /* 高度铺满父容器 */
			width: auto; /* 宽度自适应 */
			object-fit: contain; /* 图片自适应容器 */
		}
	}
    .el-image-viewer__btn {
        position: absolute;
        z-index: 1;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        border-radius: 50%;
        opacity: .8;
        cursor: pointer;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none
    }
    .el-image-viewer__actions {
        left: 50%;
        bottom: 30px;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        width: 282px;
        height: 44px;
        padding: 0 23px;
        background-color: #606266;
        border-color: #fff;
        border-radius: 22px;

        .el-image-viewer__actions__inner {
            width: 100%;
            height: 100%;
            text-align: justify;
            cursor: default;
            font-size: 23px;
            color: #fff;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -ms-flex-pack: distribute;
            justify-content: space-around
        }
    }
}
</style>

    <!-- utils/dom.js -->

import Vue from "vue";

const isServer = Vue.prototype.$isServer;

/* istanbul ignore next */
export const on = (function () {
  if (!isServer && document.addEventListener) {
    return function (element, event, handler) {
      if (element && event && handler) {
        element.addEventListener(event, handler, false);
      }
    };
  } else {
    return function (element, event, handler) {
      if (element && event && handler) {
        element.attachEvent("on" + event, handler);
      }
    };
  }
})();

/* istanbul ignore next */
export const off = (function () {
  if (!isServer && document.removeEventListener) {
    return function (element, event, handler) {
      if (element && event) {
        element.removeEventListener(event, handler, false);
      }
    };
  } else {
    return function (element, event, handler) {
      if (element && event) {
        element.detachEvent("on" + event, handler);
      }
    };
  }
})();

/* istanbul ignore next */
export function addClass(el, cls) {
  if (!el) return;
  var curClass = el.className;
  var classes = (cls || "").split(" ");

  for (var i = 0, j = classes.length; i < j; i++) {
    var clsName = classes[i];
    if (!clsName) continue;

    if (el.classList) {
      el.classList.add(clsName);
    } else if (!hasClass(el, clsName)) {
      curClass += " " + clsName;
    }
  }
  if (!el.classList) {
    el.setAttribute("class", curClass);
  }
}

/* istanbul ignore next */
export function removeClass(el, cls) {
  if (!el || !cls) return;
  var classes = cls.split(" ");
  var curClass = " " + el.className + " ";

  for (var i = 0, j = classes.length; i < j; i++) {
    var clsName = classes[i];
    if (!clsName) continue;

    if (el.classList) {
      el.classList.remove(clsName);
    } else if (hasClass(el, clsName)) {
      curClass = curClass.replace(" " + clsName + " ", " ");
    }
  }
  if (!el.classList) {
    el.setAttribute("class", trim(curClass));
  }
}

/* istanbul ignore next */
export function hasClass(el, cls) {
  if (!el || !cls) return false;
  if (cls.indexOf(" ") !== -1)
    throw new Error("className should not contain space.");
  if (el.classList) {
    return el.classList.contains(cls);
  } else {
    return (" " + el.className + " ").indexOf(" " + cls + " ") > -1;
  }
}

// const SPECIAL_CHARS_REGEXP = /([\:\-\_]+(.))/g;
// const MOZ_HACK_REGEXP = /^moz([A-Z])/;
const ieVersion = isServer ? 0 : Number(document.documentMode);

/* istanbul ignore next */
const trim = function (string) {
  return (string || "").replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, "");
};

/* istanbul ignore next */
// const camelCase = function(name) {
//   return name.replace(SPECIAL_CHARS_REGEXP, function(_, separator, letter, offset) {
//     return offset ? letter.toUpperCase() : letter;
//   }).replace(MOZ_HACK_REGEXP, 'Moz$1');
// };

/* istanbul ignore next */
export const getStyle = ieVersion < 9 ? function(element, styleName) {
  if (isServer) return;
  if (!element || !styleName) return null;
  // styleName = camelCase(styleName);
  if (styleName === 'float') {
    styleName = 'styleFloat';
  }
  try {
    switch (styleName) {
      case 'opacity':
        try {
          return element.filters.item('alpha').opacity / 100;
        } catch (e) {
          return 1.0;
        }
      default:
        return (element.style[styleName] || element.currentStyle ? element.currentStyle[styleName] : null);
    }
  } catch (e) {
    return element.style[styleName];
  }
} : function(element, styleName) {
  if (isServer) return;
  if (!element || !styleName) return null;
  // styleName = camelCase(styleName);
  if (styleName === 'float') {
    styleName = 'cssFloat';
  }
  try {
    var computed = document.defaultView.getComputedStyle(element, '');
    return element.style[styleName] || computed ? computed[styleName] : null;
  } catch (e) {
    return element.style[styleName];
  }
};

    <!-- utils/util.js -->

import Vue from "vue";

export function rafThrottle(fn) {
  let locked = false;
  return function (...args) {
    if (locked) return;
    locked = true;
    window.requestAnimationFrame(() => {
      fn.apply(this, args);
      locked = false;
    });
  };
}

export const isFirefox = function () {
  return (
    !Vue.prototype.$isServer && !!window.navigator.userAgent.match(/firefox/i)
  );
};

  2. 在main.js文件加入如下代码

    import Image from "@/components/image-view/index.vue";
Vue.component("ImageView", Image);

  3. 使用

    <template>
	<div class="image-demo">
		<ImageView url="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg" />
	</div>
</template>
诸葛亮的芭蕉扇
关注
使用Vue2开发一个图片预览组件，支持多图切换、缩放旋转、鼠标滚轮、键盘按键、拖动等等操作
Web_boom的博客
02-20 4724
最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
Vue组件之v-viewer实现图片预览和缩放鼠标可随意拖拽
qq_43777572的博客
10-19 553
Vue组件之v-viewer实现图片预览和缩放鼠标可随意拖拽
图片预览组件PhotoView
大学霸__IT达人
05-29 849
图片预览组件PhotoViewPhotoView是一款图片预览组件，广泛应用于大图的查看。该组件支持图片手势缩放、旋转等功能。它可以很好的和ViewPager、Picasso等组件结合，实现各种复杂的功能。...
vue项目图片预览组件
最新发布
m0_64649329的博客
08-06 1733
vue项目图片预览组件——小图切换大图&放大镜功能的实现
造轮子之图片预览组件(preview)
weixin_34112030的博客
01-08 1044
图片放大预览是种很常见的场景和功能，一般移动网站首页的轮播 banner，商品详情页的商品图片等位置都会用到此功能 像这种常用的场景功能肯定是有人早就写好插件了的，所以遇到这种场景，一般都遵循以下三步： 打开冰箱 启动 Github 搜索 photo、preview、carousel、photoSwipe等关键字 找到想要的库，npm install之 这种做法没毛病，有现成的轮子可用当然拿来...
三种图片预览插件viewer、vue-photo-preview、vue-picture-preview
weixin_54397440的博客
03-01 2175
preview图片预览插件data () {return {imgs: [title: '图片1',},title: '图片2',},
react-基于viewerjs实现的react图片预览组件支持的旋转缩放和缩放等操作
08-15
将Viewer.js与React结合，可以利用React的组件化思想和生命周期方法，更好地管理和控制图片预览的状态。 在React中实现Viewer.js图片预览组件的步骤大致如下： 1. **安装依赖**：首先需要在项目中安装Viewer.js和...
基于element-puls的el-image-viewer组件实现移动端单指拖拽和双指缩放功能
06-29
二次封装的el-image-viewer组件，具有移动端双指缩放和单指拖拽功能。
多图片预览功能以及图片多点触控(缩放,双击,拖动)
06-05
在IT领域，尤其是在移动应用开发中，多图片预览功能及图片多点触控是常见的需求，这使得用户能够互动地查看和操作图像。本文将深入探讨如何实现这些功能，包括图片自由缩放、双击缩放、图片自由移动以及与ViewPager...
react-这是一个用于做图片预览或者图片查看得react插件
08-15
在React开发领域，图片预览和查看功能是常见的需求，特别是在构建富交互式的Web应用时。这个名为"react-这是一个用于做图片预览或者图片查看得react插件"的项目，正是为了解决这一问题而设计的。它提供了一种方便、...
图片预览插件 viewer
02-10
图片预览插件 viewer
Vue-Photo-Preview：一款强大的Vue.js图片预览组件
gitblog_00086的博客
04-18 1253
Vue-Photo-Preview：一款强大的Vue.js图片预览组件 项目地址:https://gitcode.com/826327700/vue-photo-preview Vue-Photo-Preview 是一个精心设计的Vue.js插件，专为网页中的图片预览而生。它提供了丰富的功能和自定义选项，让开发者能够轻松地在自己的应用中集成高质量的图片预览体验。 项目简介 Vue-Photo-Pr...
【图片预览组件---图片预览功能和切换】
qq_48163513的博客
07-15 269
图片预览功能和切换
vue2/vue3图片预览插件
zcq6037的博客
02-28 8407
vue3图片预览插件 这是一个基于vue3的图片预览插件，该预览插件使用非常简单、方便！ 无需引入组件，可直接通过方法调用！目前只支持pc端。 该插件可预览，缩放，旋转，移动图片。 npm地址 github地址 如果对您有帮助，麻烦去github给个Star npm安装 npm install vue3-preview-image -S 在main.js引入 import vue3PreviewImage from 'vue3-preview-image' app.use(vue3PreviewIma
自己封装的图片预览组件
zhanghuaiwei
10-17 687
自己封装的定制化图片预览组件 1、针对Vue2， 2、支持图片列表切换、图片的旋转、放大、缩小、全屏 3、定制化：显示当前图片的名称，样式自定义
推荐一款强大的Vue3图片预览组件：vue3-photo-preview
gitblog_00060的博客
04-03 2584
推荐一款强大的Vue3图片预览组件：vue3-photo-preview 项目地址:https://gitcode.com/NameWjp/vue3-photo-preview 项目简介 在前端开发中，我们经常需要处理图片的预览和展示功能，为此，开发者【NameWjp】创建了一个专门为Vue3框架设计的高效、灵活的图片预览库——vue3-photo-preview。该项目基于Vue3的特性，提供了...
超实用的插件—一键实现图片预览（简单易上手）
qq_63141820的博客
07-06 556
本篇在于采用npm上的一款组件（Vue3-Image-Preview），快速实现图片预览和操作该图片的功能，支持放大或者缩小图片。（本篇采用vue3+element-plus进行构建项目）具体其他效果和功能可以看原文npm的官方，地址如下。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值