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 相关文章推荐
javascript 带有滚动条的表格,标题固定,带排序功能.
Nov 13 Javascript
jquery手风琴特效插件
Feb 04 Javascript
JavaScript中windows.open()、windows.close()方法详解
Jul 28 Javascript
详解AngularJS中的表单验证(推荐)
Nov 17 Javascript
js/jq仿window文件夹移动/剪切/复制等操作代码
Mar 08 Javascript
基于bootstrap实现收缩导航条
Mar 17 Javascript
浅谈ECMAScript6新特性之let、const
Aug 02 Javascript
使用selenium抓取淘宝的商品信息实例
Feb 06 Javascript
JavaScript基于对象方法实现数组去重及排序操作示例
Jul 10 Javascript
在iFrame子页面里实现模态框的方法
Aug 17 Javascript
JavaScript函数、闭包、原型、面向对象学习笔记
Sep 06 Javascript
在Vue项目中,防止页面被缩放和放大示例
Oct 28 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 array_flip() 删除重复数组元素专用函数
2010/05/16 PHP
PHP时间处理类操作示例
2018/09/05 PHP
Laravel重定向,a链接跳转,控制器跳转示例
2019/10/22 PHP
jquery延迟加载外部js实现代码
2013/01/11 Javascript
转义字符(\)对JavaScript中JSON.parse的影响概述
2013/07/17 Javascript
JQuery中绑定事件(bind())和移除事件(unbind())
2015/02/27 Javascript
贴近用户体验的Jquery日期、时间选择插件
2015/08/19 Javascript
基于Jquery和html5的7款个性化地图插件
2015/11/17 Javascript
总结JavaScript三种数据存储方式之间的区别
2016/05/03 Javascript
js每隔两秒输出数组中的一项(实例)
2017/05/28 Javascript
angularJs使用$watch和$filter过滤器制作搜索筛选实例
2017/06/01 Javascript
JS全角与半角转化实例(分享)
2017/07/04 Javascript
集合Bootstrap自定义confirm提示效果
2017/09/19 Javascript
Node.js使用Koa搭建 基础项目
2018/01/08 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
2018/09/20 Javascript
用VueJS写一个Chrome浏览器插件的实现方法
2019/02/27 Javascript
JavaScript 继承 封装 多态实现及原理详解
2019/07/29 Javascript
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
2019/08/26 Javascript
Vue.js的模板语法详解
2020/02/16 Javascript
Vue管理系统前端之组件拆分封装详解
2020/08/23 Javascript
python实现的希尔排序算法实例
2015/07/01 Python
深入分析python中整型不会溢出问题
2018/06/18 Python
python实现坦克大战游戏 附详细注释
2020/03/27 Python
python、PyTorch图像读取与numpy转换实例
2020/01/13 Python
美国最大的在线寄售和旧货店:Swap.com
2018/08/27 全球购物
TecoBuy澳大利亚:在线电子和小工具商店
2020/06/25 全球购物
程序运行正确, 但退出时却"core dump"了,怎么回事
2014/02/19 面试题
学生档案自我鉴定
2013/10/07 职场文书
安全标准化实施方案
2014/02/20 职场文书
企业宣传方案
2014/03/04 职场文书
电子商务专业毕业生自荐书
2014/06/22 职场文书
2014年无财产无子女离婚协议书范本
2014/10/09 职场文书
社区党支部承诺书
2015/04/29 职场文书
预备党员半年考察意见
2015/06/01 职场文书
python用tkinter开发的扫雷游戏
2021/06/01 Python
JVM的类加载器和双亲委派模式你了解吗
2022/03/13 Java/Android