经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » Vue.js » 查看文章
vue实现图片预览放大以及缩小问题
来源：jb51　　时间：2023/1/16 9:16:20　　对本文有异议

vue图片预览放大以及缩小

1.在vue的环境下实现图片放大缩小，可以使用viewerjs

效果图：

关于 viewerjs的使用

1）首先安装依赖

  1. npm i v-viewer --save

2）全局注册（在main.js）以及引用css

  1. //导入图片预览viewer组件以及css
  2. import Viewer from 'v-viewer'
  3. import 'viewerjs/dist/viewer.css'
  4. Vue.use(Viewer);
  5. Viewer.setDefaults({
  6.   Options: { "inline": true, "button": true, "navbar": true, "title": true, "toolbar": true, "tooltip": true, "movable": true, "zoomable": true, "rotatable": true, "scalable": true, "transition": true, "fullscreen": true, "keyboard": true, "url": "data-source" }
  7. });

关于viewerjs中setDeafaults的配置下面有一张表，大家可以参考一下

这些工作都做完以后，然后可以在components（公共组件）文件下新建一个文件夹，命名看个人习惯，再新建一个以xxx.vue文件（同上，命名不做具体要求看个人习惯）。

在xxx.vue中写入

  1. <template>
  2.   <div class="content">
  3.     <!-- <h1>Viewer图片预览插件</h1> -->
  4.     <viewer :images="viewerList">
  5.       <img
  6.         v-for="src in viewerList"
  7.         :src="src.icon"
  8.         :key="src.id"
  9.         style="width: 50px; height: 50px; margin-right: 5px"
  10.       />
  11.     </viewer>
  12.   </div>
  13. </template>
  14.  
  15. <script>
  16. export default {
  17.   props: {
  18.     viewerList: {
  19.       type: Array,
  20.       default: [],
  21.     },
  22.   },
  23.   mounted() {},
  24.   data() {
  25.     return {};
  26.   },
  27. };
  28. </script>
  29.  
  30. <style>
  31. </style>

因为已经全局注册过了，可以直接使用<viewer>标签 然后这个作为子组件。viewer绑定的一定要为数组，不然是会报错的（避坑）。

当这些都准备好的就可以在“父页面”使用了。

在父页面不要忘了引用以及注册

  1. import viewer from "../../../components/viewer/viewer-preview.vue";
  2. export default {
  3.   name: "business",
  4.   components: { viewer },
  5. }

仅展示了关键代码，其他的data(){ return{   }   }等等按需写入。

注册完以后在需要用到的地方直接写入，数据的都是通过父传子props的方式

  1.   <Table :columns="figurenHeader" :data="figurenData">
  2.           <template slot-scope="{ row }" slot="img">
  3.             <div style="margin-top: 10px">
  4.               <viewer :viewerList="row.iconUrlList"></viewer>
  5.             </div>
  6.           </template>
  7.         </Table>

因为使用的是table里面的插槽，所以传入的数据为row.iconUrlList.  这样整个工作就算是结束了。

vue实现图片预览(放大缩小拖拽)纯手写

这张图是显示的图片放大的一个预览情况，这里是参考预览操作实现的一个背景为黑色的部分，上层的图片可实现滚轮放大或者点击上部的放大镜图标进行放大，代码是基于Ant Design Vue框架的基础上

这里先分解部分，后面有全部代码

1.需要有黑色背景用于预览背景：

这里的背景要占满整个屏幕（这里的一般是参考其他插件预览的样式进行模拟设计的），样式在后方代码内

2.展示图片并且把图片展示到背景板最中间。

3.最重要的下方的两部分：

滚轮放大缩小图片

  1. bbimg() {
  2.       let e = e || window.event
  3.       this.params.zoomVal += e.wheelDelta / 1200
  4.       if (this.params.zoomVal >= 0.2) {
  5.         this.test = `transform:scale(${this.params.zoomVal});`
  6.       } else {
  7.         this.params.zoomVal = 0.2
  8.         this.test = `transform:scale(${this.params.zoomVal});`
  9.         return false
  10.       }
  11.     },

图片拖拽

  1. imgMove(e) {
  2.       console.log('e', e)
  3.       let oImg = e.target
  4.       let disX = e.clientX - oImg.offsetLeft
  5.       let disY = e.clientY - oImg.offsetTop
  6.       console.log('disX', disX)
  7.       document.onmousemove = (e) => {
  8.         e.preventDefault()
  9.         let left = e.clientX - disX
  10.         let top = e.clientY - disY
  11.         this.test = this.test + `left: ${left}px;top: ${top}px;`
  12.       }
  13.       document.onmouseup = (e) => {
  14.         document.onmousemove = null
  15.         document.onmouseup = null
  16.       }
  17.     },

这里的test和classStyle是作为图片的动态样式，虽然名字起得着急，但是不影响使用

整体实现的功能

  • 点击图片，可以进行滚轮放大及缩小，
  • 点击后按压左键可进行拖拽查看图片
  • 点击上方的放大及缩小图标也可以进行放大等操作，
  • 点击 x 可关于预览
  • 点击关闭后，恢复大小，避免点击其他照片影响大小

下面是全部实现代码：

  1. <template>
  2.   <a-card style="width: 100%">
  3.     <div>
  4.       <img
  5.         :src="file"
  6.         alt=""
  7.         @click="handlePhotoShow(file)"
  8.         />
  9.       <!-- preview="0"
  10.         preview-text="图片" -->
  11.     </div>
  12.     <div class="showImg" v-if="pictShow" @mousewheel="bbimg(this)">
  13.       <div class="setting_box">
  14.         <a-icon
  15.           class="setting_zoom"
  16.           v-if="zoomInShow == false"
  17.           type="zoom-in"
  18.           @click="handleZoomIn"
  19.         />
  20.         <a-icon
  21.           color="#fff"
  22.           class="setting_zoom"
  23.           v-if="zoomInShow == true"
  24.           type="zoom-out"
  25.           @click="handleZoomOut"
  26.         />
  27.         <a-icon color="#fff" class="setting_close" type="close" @click="handleClose" />
  28.       </div>
  29.       <img :src="file" alt="" :class="classStyle" :style="test" @mousedown="imgMove" />
  30.     </div>
  31.   </a-card>
  32. </template>
  33.  
  34. <script>
  35. export default {
  36.   data() {
  37.     return {
  38.       test: '',
  39.       pictShow: false,
  40.       zoomInShow: false,
  41.       params: {
  42.         zoomVal: 1,
  43.         left: 0,
  44.         top: 0,
  45.         currentX: 0,
  46.         currentY: 0,
  47.         flag: false,
  48.       },
  49.       file: '',
  50.     }
  51.   },
  52.   computed: {
  53.     classStyle() {
  54.       return this.zoomInShow ? 'a1' : 'a2'
  55.     },
  56.   },
  57.   methods: {
  58.     // 实现图片放大缩小 
  59.     bbimg() {
  60.       let e = e || window.event
  61.       this.params.zoomVal += e.wheelDelta / 1200
  62.       if (this.params.zoomVal >= 0.2) {
  63.         this.test = `transform:scale(${this.params.zoomVal});`
  64.       } else {
  65.         this.params.zoomVal = 0.2
  66.         this.test = `transform:scale(${this.params.zoomVal});`
  67.         return false
  68.       }
  69.     },
  70.     // 实现图片拖拽
  71.     imgMove(e) {
  72.       console.log('e', e)
  73.       let oImg = e.target
  74.       let disX = e.clientX - oImg.offsetLeft
  75.       let disY = e.clientY - oImg.offsetTop
  76.       console.log('disX', disX)
  77.       document.onmousemove = (e) => {
  78.         e.preventDefault()
  79.         let left = e.clientX - disX
  80.         let top = e.clientY - disY
  81.         this.test = this.test + `left: ${left}px;top: ${top}px;`
  82.       }
  83.       document.onmouseup = (e) => {
  84.         document.onmousemove = null
  85.         document.onmouseup = null
  86.       }
  87.     },
  88.     handleZoomIn() {
  89.       this.zoomInShow = true
  90.     },
  91.     handleZoomOut() {
  92.       this.zoomInShow = false
  93.     },
  94.     handlePhotoShow(file) {
  95.       console.log('file', file)
  96.       this.file = file
  97.       this.pictShow = true
  98.     },
  99.     handleClose() {
  100.       this.pictShow = false
  101.       this.test = `transform:scale(1)`
  102.     },
  103.   },
  104. }
  105. </script>
  106. <style scoped lang="less">
  107. .showImg {
  108.   width: 100%;
  109.   height: 100vh;
  110.   background-color: rgba(0, 0, 0, 1);
  111.   position: fixed;
  112.   *position: absolute;
  113.   z-index: 20;
  114.   margin: 0 auto;
  115.   top: 0;
  116.   left: 0;
  117.   display: flex;
  118.   justify-content: center;
  119.   align-items: center;
  120.   .setting_box {
  121.     width: 100%;
  122.     height: 50px;
  123.     line-height: 50px;
  124.     font-size: 20px;
  125.     background-color: rgba(0, 0, 0, 0.3);
  126.     position: absolute;
  127.     top: 0;
  128.     z-index: 999;
  129.     .setting_zoom,
  130.     .setting_close {
  131.       position: absolute;
  132.       z-index: 1000;
  133.       top: 20px;
  134.       color: #fff;
  135.       opacity: 1;
  136.     }
  137.     .setting_zoom {
  138.       right: 50px;
  139.     }
  140.     .setting_close {
  141.       right: 10px;
  142.     }
  143.   }
  144. }
  145. .a1 {
  146.   max-width: 200vw;
  147.   max-height: 180vh;
  148.   position: absolute;
  149.   z-index: 22;
  150.   margin-top: 40px;
  151.   cursor: move;
  152. }
  153. .a2 {
  154.   max-width: 95vw;
  155.   max-height: 90vh;
  156.   position: absolute;
  157.   z-index: 22;
  158.   margin-top: 40px;
  159.   cursor: move;
  160. }
  161. .zoom-box {
  162.   cursor: zoom-in;
  163. }
  164. .photo_box {
  165.   margin: 0 5px 5px 0;
  166. }
  167. </style>

因为具体也是查看了很多博客等资源最后完成的。

其实在代码内有一部分代码：

  1. <img
  2. 	:src="file"
  3. 	preview="0"
  4. 	preview-text="图片"
  5. 	alt=""
  6. 	@click="handlePhotoShow(file)"
  7. />

其实有  preview="0" preview-text="图片" 这两行实现图片的预览，但是找了资料没找到具体实现的部分，但是这个属性确实实现了

这里手写预览的原因是这个插件在数量大的情况下是没有反应的。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持w3xue。

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

Vue.js热门文章

  • vue3中getCurrentInstance示例讲解
  • vue3页面跳转的两种方式
  • vue3动态加载对话框的方法实例
  • vue之Element-Ui输入框显示与隐藏方式
  • 封装vue基于element的select多选时启用鼠标悬停折叠文字以tooltip显示具体所选值
  • vue播放flv、m3u8视频流(监控)的方法实例
  • vue实现手机验证码登录
  • vue实现图片预览放大以及缩小问题
  • Vue自定义指令中无法获取this的问题及解决
  • uniapp组件uni-file-picker中设置使用照相机和相册权限的操作方法

    • Vue.js推荐文章

  • 《花100块做个摸鱼小网站! 》第四篇—前端应用搭建和完成第一个热搜组件
  • 卧槽，牛逼！vue3的组件竟然还能“暂停”渲染！
  • 给我5分钟，保证教会你在vue3中动态加载远程组件
  • 业务场景---Token无感刷新
  • 前端如何处理后端一次性返回10万条数据？
  • Vite本地构建：手写核心原理
  • 70%的人都答错了的面试题，vue3的ref是如何实现响应式的？
  • VUE系列之性能优化--懒加载
  • Vue 3 后端错误消息处理范例
  • useCookie函数：管理SSR环境下的Cookie

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号