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 相关文章推荐
在IE下获取object(ActiveX)的Param的代码
Sep 15 Javascript
自己写的Javascript计算时间差函数
Oct 28 Javascript
JS将制定内容复制到剪切板示例代码
Feb 11 Javascript
JavaScript实现列出数组中最长的连续数
Dec 29 Javascript
JS点击链接后慢慢展开隐藏着图片的方法
Feb 17 Javascript
javascript产生随机数方法汇总
Jan 25 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
Apr 03 Javascript
jquery获取复选框checkbox的值实现方法
May 30 Javascript
JavaScript中关键字 in 的使用方法详解
Oct 17 Javascript
ES6中箭头函数的定义与调用方式详解
Jun 02 Javascript
iframe高度自适应及隐藏滚动条的实例详解
Sep 29 Javascript
package.json中homepage属性的作用详解
Mar 11 Javascript
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
比较全的PHP 会话(session 时间设定)使用入门代码
2008/06/05 PHP
Yii框架中jquery表单验证插件用法示例
2016/10/18 PHP
Yii2-GridView 中让关联字段带搜索和排序功能示例
2017/01/21 PHP
PHP扩展Swoole实现实时异步任务队列示例
2019/04/13 PHP
laravel框架中间件简单使用方法示例
2020/01/25 PHP
学习ExtJS form布局
2009/10/08 Javascript
利用div+jquery自定义滚动条样式的2种方法
2013/07/18 Javascript
使用JavaScript实现连续滚动字幕效果的方法
2015/07/07 Javascript
jQuery插件boxScroll实现图片轮播特效
2015/07/14 Javascript
字符串反转_JavaScript
2016/04/28 Javascript
js和C# 时间日期格式转换的简单实例
2016/05/28 Javascript
Bootstrap框架的学习教程详解(二)
2016/10/18 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
2017/03/30 Javascript
详解Vue 非父子组件通信方法(非Vuex)
2017/05/24 Javascript
无限循环轮播图之运动框架(原生JS实现)
2017/10/01 Javascript
jQuery封装animate.css的实例
2018/01/04 jQuery
vue .sync修饰符的使用详解
2018/06/15 Javascript
通过实例解析JavaScript for in及for of区别
2020/06/15 Javascript
vue集成一个支持图片缩放拖拽的富文本编辑器
2021/01/29 Vue.js
[58:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第一场 1月31日
2021/03/11 DOTA
python编程-将Python程序转化为可执行程序[整理]
2007/04/09 Python
Python字典实现简单的三级菜单(实例讲解)
2017/07/31 Python
Django框架教程之正则表达式URL误区详解
2018/01/28 Python
Python File(文件) 方法整理
2019/02/18 Python
Python3中urlencode和urldecode的用法详解
2019/07/23 Python
10个Python面试常问的问题(小结)
2019/11/20 Python
Python开发之pip安装及使用方法详解
2020/02/21 Python
YOINS官网:时尚女装网上购物
2017/03/17 全球购物
英国百年闻名的优质健康产品连锁店:Holland & Barrett
2019/12/19 全球购物
毕业生的自我鉴定该怎么写
2013/12/02 职场文书
内刊编辑求职自荐书范文
2014/02/19 职场文书
乐观自信演讲稿范文
2014/05/21 职场文书
二胎满月酒致辞
2015/07/29 职场文书
数学备课组工作总结
2015/08/12 职场文书
python中的None与NULL用法说明
2021/05/25 Python
python利用pandas分析学生期末成绩实例代码
2021/07/09 Python