js 写一个前端图片查看器

最新推荐文章于 2025-11-21 07:21:12 发布

原创

最新推荐文章于 2025-11-21 07:21:12 发布 · 2.3k 阅读

16 ·

CC 4.0 BY-SA版权

本文介绍了一款基于Vue和iView的自定义图片查看器，不仅具备基本的图片预览功能，还提供了图片放大缩小、鼠标滚轮缩放、拖拽、全屏查看、上/下一张切换、双击还原等功能，以及业务层面的图片裁剪、下载、标记、删除操作。

1. 前言

网上已经有不少成熟的图片查看器插件，如果是单纯想要点击图片放大预览的话，可以直接使用插件。例如viewerjs

但是，当打开图片后还需要对图片进行一些像删除、下载、标记等业务层面上的操作，使用插件就显得不那么便捷，于是决定自己简单写个图片查看器

2. 设计思路

项目中用的是vue+iview，于是使用Modal弹窗组件做为播放器的盒子，考虑需要用到的基本功能有：
放大缩小、
监听鼠标滚轮放大缩小、
拖拽、
全屏查看、
查看上/下一张、
双击图片回到初始大小和初始位置

3. 完成效果

在这里插入图片描述
4. 代码思路

html部分：

<Modal
	id="picture_viewer_modal"
	v-model="visible"
	:mask-closable = "false"
	@on-cancel="cancel()"
	footer-hide
	width="70%"
	:fullscreen="fullscreen"
>
	<div class="wrap">
		<p class="num_tip">第 {
  
  {index+1}}/{
  
  {picArr.length}} 张</p>
		
		<!-- 查看图片的盒子 -->
		<div id="father" class="box">
		    <img id="box" class="img_max img_auto" @dblclick="getDefault()" :src="row.src">
		    <!-- 查看上一张 -->
		    <span class="next_btn btn_left" @click="left()"></span>
		    <!-- 查看下一张 -->
		    <span class="next_btn btn_right" @click="right()"></span>
		</div>
		
		<!-- 按钮条 -->
		<div class="tool_bar">
		    <!-- 裁剪 -->
		    <span class="tool_btn btn_1" @click="cutPic()"></span>
		    <!-- 全屏 -->
		    <span class="tool_btn btn_2" @click="fullScreen()"></span>
		    <!-- 放大 -->
		    <span class="tool_btn btn_3" @click="big()"></span>
		    <!-- 缩小 -->
		    <span class="tool_btn btn_4" @click="small()"></span>
		    <!-- 下载 -->
		    <span class="tool_btn btn_5" @click="download()"></span>
	       <!-- 选中 -->
	       <span class="tool_btn btn_8" @click="choose()"></span>
	       <!-- 删除 -->
	       <span class="tool_btn btn_9" @click="del(row.id)"></span>
	   </div>
	</div>
</Modal>

js部分：

props: {
   
   
    picList:Array,
    rowData:Object
},
data() {
   
   
    return {
   
   
    	//弹窗显隐
        visible: false,
        //当前查看的图片
        row: {
   
   },
        //当前查看的图片在数组中的位置
        index: 0,
        //所有图片
        picArr: [],
        //是否全屏
        fullscreen: false,
    };
},
watch: {
   
   
	//监听弹窗打开事件
    modal(val) {
   
   
        this