前端demo: 前端图片预览组件Viewer.js组件封装

1.简介

Viewer.js 是一款强大的图片查看器。我们通过Viewer.js 在页面上添加强大的图片查看功能，同时，这款优秀的插件配置操作起来也非常的方便

下载地址：GitHub - fengyuanchen/viewerjs: JavaScript image viewer.

2.支持的功能

• 支持53个选项
• 支持23种方法
• 支持17个事件
• 支持模态和内联模式
• 支持触摸
• 支持移动
• 支持缩放
• 支持旋转
• 支持缩放(翻转)
• 支持键盘
• 跨浏览器支持

3.使用封装

let viewerInstance = null
const UPLOADER_HIDDEN_IMG_ID = 'UploaderHiddenImg'
const IGNORE_CLASSES = ['item-img']
let $hiddenImgContainer = null

function createHiddenImgContainer() {
    if (!$hiddenImgContainer || $hiddenImgContainer.length === 0) {
        $hiddenImgContainer = $(`<div id="${UPLOADER_HIDDEN_IMG_ID}" style="display:none;"></div>`).appendTo('body')
    }
}

function previewImg(ele) {
    if (!ele) return

    createHiddenImgContainer()
    $hiddenImgContainer.empty().append(ele.cloneNode(true))

    if (!viewerInstance) {
        viewerInstance = new Viewer(document.getElementById(UPLOADER_HIDDEN_IMG_ID), {
            inline: false,
            navbar: false,
            title: false,
            zoomRatio: 0.1, //鼠标滚动时的缩放比例
            minZoomRatio: 0.3, //最小缩放比例
            maxZoomRatio: 100, //最大缩放比例
            show: () => {
                $('li.viewer-prev, li.viewer-next').hide()
                viewerInstance.update()
            },
            hidden: function () {
                $hiddenImgContainer.hide()
                // viewerInstance = null;
            },
        })
    }

    viewerInstance.view(ele)
}

$('.p-view').on('click', 'img', function (e) {
    if (IGNORE_CLASSES.some((cls) => e.target.classList.contains(cls))) return
    previewImg(e.target)
})