Vue实现pc/移动端图片预览、放大、缩小、旋转的效果

最新推荐文章于 2024-09-25 10:44:15 发布
最新推荐文章于 2024-09-25 10:44:15 发布
阅读量1.7k 收藏 2
点赞数
分类专栏： vue 文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45735728/article/details/109220697
版权
本文介绍了如何使用 Viewer.js 库在 PC 和移动端实现图片预览、缩放、旋转等功能。通过简单的 npm 安装和 Vue 的全局引入，可以轻松集成到项目中。示例代码展示了在 Vue 中使用 Viewer.js 的具体步骤，帮助开发者快速打造图片查看体验。
摘要由CSDN通过智能技术生成
  • 实现pc/移动端图片预览、放大、缩小、旋转的效果
  • git => https://github.com/mirari/v-viewer
  • 使用

1.npm install v-viewer
2.在全局引入或局部引入

全局引入
`import ‘viewerjs/dist/viewer.css’;
import ‘…/static/css/defaultstyle.css’;

`Vue.use(Viewer);

<viewer :images="images">
    <img v-for="src in images" :src="src" :key="src">
</viewer>
Dreamy smile
关注
专栏目录
一款超好用的vue图片预览组件，支持手机端和pc端单图、多图预览，支持缩放，拖拽，旋转，键盘控制
qq_28252421的博客
06-15 1584
本组件是一个基于 vue 编写的vue图片预览组件，支持单图和多图预览，仅传入一个图片地址，即可实现图片预览效果，比较适合给文章及页面的所有图片添加预览效果。预览背景色，关闭按钮颜色，控制条的背景也和字体颜色都可自定义，兼容 ie9+，火狐，Safari，谷歌浏览器，支持多图预览。
Vue点击图片预览放大（支持旋转、翻转、缩放、上下切换、键盘操作）
Oliver的博客
12-24 5963
版权声明：本文为博主原创文章，博主不会以任何方式收取查看费用，欢迎大家进行转载。 本次项目使用Vue+element的UI框架，因产品要求需要实现图片点击进行放大，有些图片上传时不是正序，需要进行翻转查看。翻阅element-UI好像没有这样子的组件，想自己写，觉得可能麻烦，于是乎上了GitHub找。。。。找到一个合适Vue的插件，叫viewerjs, GitHub直达. 说句实话，它的功能还是很...
vue项目如何在移动端预览
糖小七_Zz的博客
03-10 542
做好的vue项目想在移动端去预览，测试效果。 #查看本地IPv4 win+r 输入cmd，然后确定，输入ipconfig查看IPv4。 如下图： #修改IP地址 找到项目中的config文件夹中的index.js,修改文件中的host，改成本机的ipv4。 如下图： #同一个wifi 将手机和电脑连接在同一局域网下,简单的讲可以连接同一个wifi 。 #制作二维码 二维码制作地址：https...
vue pc端展示大图片，实现放大缩小移动
最新发布
weixin_46404395的博客
09-25 110
【代码】vue pc端展示大图片，实现放大缩小移动。
vue实现移动端图片预览
weixin_49994093的博客
07-08 2411
这里写自定义目录标题vue实现移动端图片预览1.安装插件2.main引入3.使用注意扩展 vue实现移动端图片预览 通过使用vue-photo-preview插件，实现移动端图片的预览，全屏等功能。 1.安装插件 npm install vue-photo-preview --save 2.main引入 import preview from 'vue-photo-preview' import 'vue-photo-preview/dist/skin.css' Vue.use(preview) 3.使
开发vue项目中如何使用手机预览效果
CSDN for recording problems
08-13 2435
.1、电脑和手机连接到同一个WIFI a.台式电脑和手机同时链接一个路由器，使用同一个wifi； b.笔记本也可以直接启用一个wifi，手机链接笔记本wifi也可以； 2.查询本地IP地址 WIN+R，输入cmd回车，打开命令提示符，输入ipconfig，查看本地IPv4； 3.修改本地项目中IP地址 找到项目中config文件夹，下面index.js文件打开； 找到host: ‘localhos......
vue实现裁切图片同时实现放大、缩小、旋转功能
01-19
本篇文章主要介绍了vue实现裁切图片同时实现放大、缩小、旋转功能，分享给大家，具体如下： 实现效果： 裁切指定区域内的图片 旋转图片 放大图片 输出bolb 格式数据 提供给 formData 对象 效果图 ...
vue-picture-preview:移动端、PC 端 Vue.js 图片预览插件 | Friendly picture file preview Vue.js plugin based on PhotoSwipe
05-17
移动端、PC 端 Vue.js 图片预览插件 | Friendly picture file preview Vue.js plugin based on PhotoSwipe. 安装 npm install --save vue-picture-preview 使用 入口文件中全局引入 import Vue from 'vue' import ...
基于VUE实现判断设备是PC还是移动端
10-15
this.$router.replace('/pc_index'); } else { alert("pc端"); this.$router.replace('/m_index'); } } ``` 这里使用了JavaScript的`match`方法，它会查找字符串中符合正则表达式的地方，并返回一个数组。`/i`...
一个移动端专用的Vue2图片预览插件
08-12
以上就是关于移动端Vue2图片预览插件的基本介绍及其可能实现的技术点。这个插件的使用，不仅可以简化移动端图片预览功能的开发，还能提升应用的性能和用户体验。在实际项目中，开发者可以根据具体需求对插件进行适当...
移动端Vuejs图片预览插件
08-10
移动端Vue.js图片预览插件 | Mobile-friendly picture file preview Vue.js plugin with horizontal nav and bottom title.
基于jq-viewer的pc和移动端的图片缩放，托动、旋转等
01-08
基于jquery封装的viewerjs的pc图片缩放、拖拽、旋转等、也可使用于移动端
vue 手机预览图片功能
qq_25186543的博客
04-20 3464
安装NPMnpm install --save vue-picture-preview使用首先在项目的入口文件中引入, 调用 Vue.use 安装。import vuePicturePreview from 'vue-picture-preview' Vue.use(vuePicturePreview)在根组件添加 lg-preview 组件的位置&lt;!-- Vue root compomen...
vue移动端图片预览组件_带有图片预览功能的适合移动设备的图片文件输入Vue.js组件
cuk5340的博客
07-29 1360
vue移动端图片预览组件 视频图像输入 (vue-picture-input) Mobile-friendly picture file input Vue.js component with image preview, drag and drop, EXIF orientation, and more. 适用于移动设备的图片文件输入Vue.js组件，带有图像预览，拖放，EXIF方向等。 ...
vue -- pc、移动端图片裁剪
Dreamy smile
05-13 630
npm 下载 vue-cropper 引入 import VueCropper from ‘vue-cropper’ git https://github.com/xyxiao001/vue-cropper <div class="po_dia" v-if="ispop" > <vueCropper ref="cropper" :img="option.img" :outputSize="option.size" :output.
vue 移动端图片预览的方法使用总结
weixin_42333548的博客
05-28 3967
方法一： import VueImageSwipe from 'vue-image-swipe' import 'vue-image-swipe/dist/vue-image-swipe.css' Vue.use (VueImageSwipe); <div v-for="(item,index) in environmentalList" :key="index+'item'" ...
让vue的项目可以在手机预览起来（不用内网穿透，只需要在局域网内）
magic_xiang的博客
11-25 5419
     现在对于做网页来说，一般都是移动端的项目比较多，所以一开始我学vue的时候也是从移动端项目开始做，但是我们的开发工具是浏览器，虽然可以在chrome开发模式中用模拟手机预览效果，那么怎么通过真机去预览效果呢？     一开始我想到的是放在我自己电脑Apache配置好虚拟主机环境中，然后通过内网穿透直接让手机访问，但是使用vue-cli搭建项目需要进行npm run build得到的文件...
v-viewer
白_的博客
11-02 1090
@Anonymous, import Vue from ‘Vue’ import Viewer from ‘v-viewer’ import ‘viewerjs/dist/viewer.css’ Vue.use(Viewer) Viewer.setDefaults({ Options: { 'inline': true, // 是否启用inline模式 'button': true, // 是否显示右上角关闭按钮 'navbar': true, // 是否显示缩略图底部导航栏 'tit.
vue+element项目 PC后台管理图片可点击查看并旋转
weixin_44610025的博客
09-07 1021
后台认证审核管理页面，需求：图片可点击放大查看且能够旋转。 思路：图片可点击放大可以使用element的Dialog，旋转就用C3的rotate就可以。 效果： 初始图片： 点击放大后： 点击按钮左，往左旋转90°后： 实现代码： 结构： <div> <h3>身份证照片：</h3> <div class = "card_box"> <div class="one"> <div cl
vue2使用hammer.js实现移动端div拖拽放大缩小旋转
09-08
在Vue2中使用Hammer.js实现移动端div的拖拽、放大缩小和旋转可以按照以下步骤进行。 首先，在Vue项目中安装Hammer.js。 ``` npm install hammerjs ``` 然后，在需要使用拖拽、放大缩小和旋转功能的组件中引入Hammer.js，并初始化一个Hammer实例，将其绑定到要拖拽、放大缩小和旋转的div元素上。 ``` import Hammer from 'hammerjs' export default { mounted() { const element = this.$refs.element // 获取div元素的引用 const mc = new Hammer.Manager(element) // 初始化Hammer实例并将其绑定到div元素上 // 添加拖拽、放大缩小和旋转的手势识别 mc.add(new Hammer.Pan({ threshold: 0, pointers: 0 })) mc.add(new Hammer.Pinch({ threshold: 0 })).recognizeWith(mc.get('pan')) mc.add(new Hammer.Rotate({ threshold: 0 })).recognizeWith(mc.get('pan')) // 初始化div元素的拖拽、放大缩小和旋转的初始状态值 let posX = 0 let posY = 0 let scale = 1 let lastScale = 1 let rotation = 0 // 监听拖拽事件 mc.on('pan', (e) => { // 实现拖拽 posX = e.deltaX posY = e.deltaY element.style.transform = `translate(${posX}px, ${posY}px) scale(${scale}) rotate(${rotation}deg)` }) // 监听放大缩小事件 mc.on('pinch', (e) => { // 实现放大缩小 scale = lastScale * e.scale element.style.transform = `translate(${posX}px, ${posY}px) scale(${scale}) rotate(${rotation}deg)` }) // 监听旋转事件 mc.on('rotate', (e) => { // 实现旋转 rotation = e.rotation element.style.transform = `translate(${posX}px, ${posY}px) scale(${scale}) rotate(${rotation}deg)` }) } } ``` 最后，在该组件的模板中添加一个div元素，并给其添加初始样式。 ``` <template> <div ref="element" style="width: 200px; height: 200px; background-color: red;"></div> </template> ``` 这样，当你在移动端上访问这个页面时，就可以拖拽、放大缩小和旋转这个div元素了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值