vue-preview动态获取图片宽高并增加旋转功能的实现


Posted in Javascript onJuly 29, 2020

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

vue-preview动态获取图片宽高并增加旋转功能的实现

原来只有前面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等。

测试结果

vue-preview动态获取图片宽高并增加旋转功能的实现

vue-preview动态获取图片宽高并增加旋转功能的实现

测试没有问题,终于可以下班了,哈哈哈。

Tips:懒得自己动手改插件的伙伴,可以在楼主的GitHub仓库下载改好后的文件,在你安装好 vue-preview 后用“attachment”文件夹中的三个文件替换你项目中的对应文件就拥有“旋转”功能了。GitHub地址:https://github.com/xiongjun0812/vue-preview

今天就分享到这里,有问题欢迎留言交流,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
cloudgamer出品ImageZoom 图片放大效果
Apr 01 Javascript
javascript hasFocus使用实例
Jun 29 Javascript
在javascript中实现函数数组的方法
Dec 25 Javascript
IScroll5 中文API参数说明和调用方法
May 21 Javascript
JS实现title标题栏文字不间断滚动显示效果
Sep 07 Javascript
老生常谈js中0到底是 true 还是 false
Mar 08 Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
Aug 30 Javascript
vue使用keep-alive实现数据缓存不刷新
Oct 21 Javascript
vue项目中的webpack-dev-sever配置方法
Dec 14 Javascript
Angular6笔记之封装http的示例代码
Jul 27 Javascript
vue 返回上一页,页面样式错乱的解决
Nov 14 Javascript
js和jquery判断数据类型的4种方法总结
Aug 28 jQuery
vuex管理状态仓库使用详解
Jul 29 #Javascript
解决vue项目获取dom元素宽高总是不准确问题
Jul 29 #Javascript
如何使用three.js 制作一个三维的推箱子游戏
Jul 29 #Javascript
Vue实现input宽度随文字长度自适应操作
Jul 29 #Javascript
vue 判断元素内容是否超过宽度的方式
Jul 29 #Javascript
在vue中实现给每个页面顶部设置title
Jul 29 #Javascript
vue实现移动端项目多行文本溢出省略
Jul 29 #Javascript
You might like
php5 mysql分页实例代码
2008/04/10 PHP
PHP 截取字符串 分别适合GB2312和UTF8编码情况
2009/02/12 PHP
隐性调用php程序的方法
2009/03/09 PHP
php文件包含的几种方式总结
2019/09/19 PHP
页面js遇到乱码问题的解决方法是和无法转码的情况
2014/04/30 Javascript
JavaScript中switch语句的用法详解
2015/06/03 Javascript
JS模拟键盘打字效果的方法
2015/08/05 Javascript
jQuery与getJson结合的用法实例
2015/08/07 Javascript
Bootstrap模仿起筷首页效果
2016/05/09 Javascript
react-native 完整实现登录功能的示例代码
2017/09/11 Javascript
基于Proxy的小程序状态管理实现
2019/06/14 Javascript
JS实现4位随机验证码
2020/10/19 Javascript
[40:48]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第二局
2016/02/28 DOTA
[58:00]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第二场 2月7日
2021/03/11 DOTA
python 多进程通信模块的简单实现
2014/02/20 Python
Python实现设置windows桌面壁纸代码分享
2015/03/28 Python
OpenCV实现人脸识别
2017/04/07 Python
Python中int()函数的用法浅析
2017/10/17 Python
numpy使用技巧之数组过滤实例代码
2018/02/03 Python
Python网络编程基于多线程实现多用户全双工聊天功能示例
2018/04/10 Python
tensorflow使用神经网络实现mnist分类
2018/09/08 Python
Python基础知识点 初识Python.md
2019/05/14 Python
Python range、enumerate和zip函数用法详解
2019/09/11 Python
python导入不同目录下的自定义模块过程解析
2019/11/18 Python
Python字符串格式化f-string多种功能实现
2020/05/07 Python
在 Python 中使用 7zip 备份文件的操作
2020/12/11 Python
NBA欧洲商店(法国):NBA Europe Store FR
2016/10/19 全球购物
彪马荷兰官网:PUMA荷兰
2019/05/08 全球购物
《和田的维吾尔》教学反思
2014/04/14 职场文书
个人授权委托书模板
2014/09/14 职场文书
2014年社区综治工作总结
2014/11/17 职场文书
语文教师求职信范文
2015/03/20 职场文书
干货干货!2019最新优秀创业计划书
2019/03/21 职场文书
职场新人刚入职工作总结该怎么写?
2019/05/15 职场文书
2019开业庆典剪彩仪式主持词!
2019/07/22 职场文书
Python利用Turtle绘制哆啦A梦和小猪佩奇
2022/04/04 Python