vue-preview动态获取图片宽高并增加旋转功能
vue-preview是一个常用的图片查看器,微博网页版就是用的这个插件:
我在项目中也用过这个插件,总体来说,还是比较满意。但是缺少一个图片旋转功能。
安装使用
第一步:安装
npm i vue-preview -S
第二步:引用配置
import VuePreview from 'vue-preview'
Vue.use(VuePreview)
Vue.use(preview, {mainClass: 'pswp--minimal--dark',barsSize: {top: 0, bottom: 0},captionEl: false,fullscreenEl: false,shareEl: false,bgOpacity: 0.85,tapToClose: true,tapToToggleControls: false
})
第三步:使用
// 定义预览图片列表
previewlist: [{src: ‘./pic01.jpg’,w: 1200,h: 900},{src: ‘./pic01.jpg’,w: 1200,h: 900}
]// 给图片添加“preview-img”类(必须添加且要同名),以及绑定“show”方法
<img :src="decodeURIComponent(item.name)" class="preview-img" @click="show(index)">// 点击图片触发预览方法
show (index) {this.$preview.open(index, this. previewlist);
}
动态获取图片宽高
如果图片列表资源是从服务器获取,则需要先获取图片的真实宽高,具体代码如下:
this. previewlist = []; //查看列表
let imglist = […]; //从服务器获取的图片地址列表
show (index) {for (let i = 0; i < imglist.length; i++) {// 获取图片实际大小let newImage = {};let img = new Image();img.src = imglist[i];img.onload = function () {newImage.src = imglist[i];newImage.w = img.width;newImage.h = img.height;};this.previewlist.push(newImage);}// 正常情况下javascript都是按照顺序执行的。但是我们可能让该语句后面的语句执行完再执行本身,用setTimeout延时0ms来实现。setTimeout(() => {this.$preview.open(index, this.previewlist);}, 0);
}
新增图片旋转功能
默认的功能有全屏、放大、分享、图片切换等,有时候我们还需要图片旋转功能,怎么办呢?那只能自己动手改插件了。
第一步:添加旋转图标
图标文件路径:node_modules\photoswipe\dist\default-skin
原来只有前面8个图片,后面那个稍微大一点的旋转图标是我加上去的,当然你也可以把尺寸设置为和原来的一样。
第二步:添加旋转按钮到页面
页面文件路径:node_modules\vue-preview\src\plugins\preview\preview.vue
<button class="pswp__button pswp__button--rotate" title="旋转" @click="imgRotateFn"></button>
第三步:添加旋转按钮的样式
样式文件路径:node_modules\photoswipe\dist\default-skin
.pswp__button--rotate {background-position: -176px 0;
}
第四步:实现旋转方法
文件路径:node_modules\vue-preview\src\plugins\preview\preview.vue
imgRotateFn () {this.angle+=90;let imgNode = document.getElementsByClassName('pswp__img');for (let i = 0; i<imgNode.length; i++) {imgNode[i].style.WebkitTransform = 'rotate('+this.angle+'deg)';}}
这里我只贴出了关键代码,需要你自己做浏览器兼容,以及切换图片时,应该将图片角度设置为0等。
测试结果
测试没有问题,终于可以下班了,哈哈哈。
Tips:懒得自己动手改插件的伙伴,可以在楼主的GitHub仓库下载改好后的文件,在你安装好 vue-preview 后用“attachment”文件夹中的三个文件替换你项目中的对应文件就拥有“旋转”功能了。GitHub地址:https://github.com/xiongjun0812/vue-preview
今天就分享到这里,有问题欢迎留言交流,或关注楼主微信公众号:上班熊的环球梦。文中表述仅代表个人观点,如果有更好的方法,欢迎分享。
vue-preview动态获取图片宽高并增加旋转功能相关推荐
- JS快速获取图片宽高的方法
JS快速获取图片宽高的方法 快速获取图片的宽高其实是为了预先做好排版样式布局做准备,通过快速获取图片宽高的方法比onload方法要节省很多时间,甚至一分钟以上都有可能,并且这种方法适用主流浏览器包括I ...
- 微信小程序view动态长度_微信小程序实现动态获取元素宽高的方法分析
本文实例讲述了微信小程序实现动态获取元素宽高的方法.分享给大家供大家参考,具体如下: 我以前一直以为微信小程序不能动态获取view元素的宽高.但是自从看到: wx.createSelectorQuer ...
- android 通过图片url获取宽高_通过 URL 获取图片宽高优化
一张小图.png 前言 客户端研发时,有时会有这样的需求,需要根据图片链接地址获取图片的宽高来进行界面排版. 一般比较正规的做法,是服务端在返回数据时将图片的信息属性一起带回来,这也符合轻客户端设计规 ...
- Glide获取网络图片宽高,并动态设置图片宽高
因Android手机屏幕尺寸较多,当imageview宽设置match_parent,高固定时.会导致图片拉伸或裁剪.目前可通过获取图片宽高,动态设置imageview宽高比例,等比例缩放图片. ...
- vue移动端通过px动态计算图片宽高_vue图片宽高自适应_移动web图片高度自适应的解决方案...
由于图片的加载是在dom加载完成之后进行的,于是,在手机端浏览网页时,经常会看到页面刚打开时很多内容叠在一起,当图片加载完成后,页面会由于图片加载完成出现明显的抖动 针对这个问题,有以下几种解决方案 ...
- 前端获取图片宽高的几种方法
有时候动态加载图片,会因为图片宽高导致显示拉伸情况,如果能根据图片URL地址获取到图片的宽高,再进行渲染,就可以了,以下两种方案供参考: 方法一: // 图片地址 var imgUrl = " ...
- 微信小程序获取页面元素高度_微信小程序之动态获取元素宽高
我以前一直以为微信小程序不能动态获取view元素的宽高.但是自从看到: wx.createSelectorQuery() 这个api接口,以前的某些问题就能得到解决了... 那么,这个api接口怎么用 ...
- Unity快速获取图片宽高
写这个好像有瘾,根本停不下来. Unity要想获得图片尺寸,必须是加载到图片之后才能获取宽高,普通的获取尺寸方式在获取到Texture2D后,通过Texture2D的width.height属性获得. ...
- php获取图片宽高相反,exif_read_data()解决上传图片旋转、图片反向问题,getimagesize获取图片高度宽度相反的问题...
PHP getimagesize 函数获取的图像宽高反了? exif_read_data()解决上传图片旋转.图片反向问题,getimagesize获取图片高度宽度相反的问题,手机图片上传之后出现了反 ...
最新文章
- setuptools与distutils的区别
- 简述3032路pcm帧的结构_高级数据链路控制协议-HDLC
- Android Binder基本概念流程学习
- apache个人主页搭建
- 使用 SAP UI5 CLI 命令行工具构建和运行 SAP UI5 应用
- leetcode816. 模糊坐标
- 设计模式——原型模式
- python什么软件开发好_python怎样才能学好?python软件开发什么
- python自学书-Python电子书免费分享
- lamda表达式修改数据_关系数据库SQL语言简介
- 【轨迹跟踪】基于matlab无人机轨迹跟踪【含Matlab源码 1152期】
- Laravel 跨域问题解决
- 如何设置电子签名,pdf如何设置电子签名
- CVPR2020论文列表(中英对照)
- 交通信号管理服务器,矿下交通信号控制系统
- 互联网思维到底是什么?
- 物理内存管理-ucore操作系统的PADDR宏
- 为什么大学老师只教c语言,开挂的相声演员:做大学老师,主讲计算机C语言,课堂爆笑不断!...
- 【大数据面试题】(二)Hive 相关面试题总结
- 2022年初级经济师考试综合试题及答案