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 &amp; DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
Jun 02 Javascript
Javascript 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
Jan 23 Javascript
简介JavaScript中的push()方法的使用
Jun 09 Javascript
第十章之巨幕页头缩略图与警告框组件
Apr 25 Javascript
微信小程序 选择器(时间,日期,地区)实例详解
Nov 16 Javascript
简单实现js浮动框
Dec 13 Javascript
jQuery序列化后的表单值转换成Json
Jun 16 jQuery
js实现网页的两个input标签内的数值加减(示例代码)
Aug 15 Javascript
JS中数据结构之栈
Jan 01 Javascript
js getBoundingClientRect使用方法详解
Jul 17 Javascript
Vue看了就会的8个小技巧
Jan 21 Vue.js
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
探讨Hessian在PHP中的使用分析
2013/06/13 PHP
ajaxControlToolkit AutoCompleteExtender的用法
2008/10/30 Javascript
js鼠标滑过弹出层的定位IE6bug解决办法
2012/12/26 Javascript
jQuery实现密保互斥问题解决方案
2013/08/16 Javascript
基于MVC3方式实现下拉列表联动(JQuery)
2013/09/02 Javascript
js如何设置在iframe框架中指定div不显示
2013/12/04 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
2016/10/08 Javascript
JavaScript严格模式详解
2017/01/16 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
2017/04/02 jQuery
javascript 中关于array的常用方法详解
2017/05/05 Javascript
Bootstrap table学习笔记(2) 前后端分页模糊查询
2017/05/18 Javascript
Python正则表达式介绍
2012/08/06 Python
Python实现把回车符\r\n转换成\n
2015/04/23 Python
Selenium(Python web测试工具)基本用法详解
2018/08/10 Python
python如何创建TCP服务端和客户端
2018/08/26 Python
python顺序执行多个py文件的方法
2019/06/29 Python
Python Django 命名空间模式的实现
2019/08/09 Python
记一次pyinstaller打包pygame项目为exe的过程(带图片)
2020/03/02 Python
AVI-8手表美国官方商店:AVI-8 USA
2019/04/10 全球购物
杰夫·班克斯男士服装网上商店:Jeff Banks
2019/10/24 全球购物
Miller Harris官网:英国小众香水品牌
2020/09/24 全球购物
STRATHBERRY苏贝瑞包包官网:西班牙高级工匠手工打造
2020/11/10 全球购物
如何将整数int转换成字串String
2014/03/21 面试题
小学体育教学反思
2014/01/31 职场文书
学生喝酒检讨书
2014/02/06 职场文书
采购助理岗位职责
2014/02/16 职场文书
优秀公益广告词大全
2014/03/19 职场文书
2014年母亲节寄语
2014/05/07 职场文书
美术学专业求职信
2014/07/23 职场文书
单位单身证明样本
2014/10/11 职场文书
2014年生产管理工作总结
2014/12/23 职场文书
鸦片战争观后感
2015/06/09 职场文书
搞笑欢迎词大全
2015/09/30 职场文书
大学军训口号大全
2015/12/24 职场文书
珍惜时间的诗歌赏析
2019/08/23 职场文书
Java中的继承、多态以及封装
2022/04/11 Java/Android