一、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>
文章目录