图片相关Plugs
一、Lozad.js
Lozad.js 是一款基于 IntersectionObserver API 的高性能、轻量级(〜0.5kb)和可配置的懒加载器
二、cropperjs
cropperjs是一款非常强大却又简单的图片裁剪工具
三、html2canvas
html2canvas“屏幕快照”、网页截屏
四、PhotoSwipe
PhotoSwipe文档实现类似朋友圈图片查看功能,新浪微博移动web端的图片查看就是使用此插件
1 .安装
npm install photoswipe
# or
yarn add photoswipe
2 .使用,以 vue
应用为例
<template>
<div v-else class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
<div class="pswp__bg"></div>
<div class="pswp__scroll-wrap">
<div class="pswp__container">
<div class="pswp__item"></div>
<div class="pswp__item"></div>
<div class="pswp__item"></div>
</div>
<div class="pswp__ui pswp__ui--hidden">
<div class="pswp__top-bar">
<div class="pswp__counter" />
<button
class="pswp__button pswp__button--close"
title="Close (Esc)"
/>
<div class="pswp__preloader">
<div class="pswp__preloader__icn">
<div class="pswp__preloader__cut">
<div class="pswp__preloader__donut"></div>
</div>
</div>
</div>
</div>
<div
class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap"
>
<div class="pswp__share-tooltip"></div>
</div>
<button
class="pswp__button pswp__button--arrow--left"
title="Previous (arrow left)"
></button>
<button
class="pswp__button pswp__button--arrow--right"
title="Next (arrow right)"
></button>
<div class="pswp__caption">
<div class="pswp__caption__center"></div>
</div>
</div>
</div>
</div>
</template>
<script>
import PhotoSwipe from 'photoswipe/dist/photoswipe'
import UI from 'photoswipe/dist/photoswipe-ui-default'
import 'photoswipe/dist/photoswipe.css'
import 'photoswipe/dist/default-skin/default-skin.css'
export default {
name: 'PhotoSwipe',
data() {
return {
msg: 'PhotoSwipe',
}
},
mounted() {},
methods: {
imagePreview(e, currentIndex, imageArray) {
let items = []
imageArray.map((item, index, array) => {
items.push({
src: item.picUrl,
w: item.width,
h: item.height,
})
})
let options = {
index: currentIndex,
// showAnimationDuration: 0,
// hideAnimationDuration: 0,
showHideOpacity: true,
getThumbBoundsFn: function (index) {
// find thumbnail element
let thumbnail
if (e.target.nodeName === 'IMG') {
thumbnail = e.target
} else if (e.target.nodeName === 'DIV') {
thumbnail = e.target.firstChild
}
// get window scroll Y
let pageYScroll =
window.pageYOffset || document.documentElement.scrollTop
// optionally get horizontal scroll
// get position of element relative to viewport
let rect = thumbnail.getBoundingClientRect()
// w = width
return { x: rect.left, y: rect.top + pageYScroll, w: rect.width }
// Good guide on how to get element coordinates:
// http://javascript.info/tutorial/coordinates
},
}
let pswpElement = this.$refs.pswb
let gallery = new PhotoSwipe(pswpElement, UI, items, options)
gallery.init()
},
},
}
</script>
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。