react-image-viewers

一款 React 图片组件，基于 ImageViewerUtil 实现，包含：图片预览、放大、缩小、旋转、拖动功能

使用方式

bash

yarn add react-image-viewers

bash

import ReactImageViewer from 'react-image-viewers'

import 'react-image-viewers/lib/esm/index.css'





const reactImageViewerRef = useRef(null)

const [loading, setLoading] = useState(false)



    ref={reactImageViewerRef}

    url={imageUrl}

    timeout={5000}

    onLoadStart={(url) => {

        console.log(

ReactImageViewer Image LoadStart:: url=${url}

)

        setLoading(true)

    }}

    onLoad={(image) => {

        const { width, height } = image

        console.log(

ReactImageViewer Image Load:: width=${width},height=${height}

)

        setLoading(false)

    }}

    onLoadError={(err) => {

        console.error(

ReactImageViewer Image LoadError:: error=${JSON.stringify(err)}

)

        setLoading(false)

    }}

    onStyleChange={(opts) => {

        console.log(

ReactImageViewer Image StyleChange:: options=${JSON.stringify(opts)}

)

    }}

/>





API



$3



-   [url]: image url

-   [onLoadStart]：image loading

-   [onLoad]： image load

-   [onLoadError]: image load error

-   [onStyleChange]：image some attr change

-   [timeout]：delay show image

-   [config]:

    perScale?: number // 每次缩放比例

    minScale?: number // 最小缩放比例

    maxScale?: number // 最大缩放比例

    perRotate?: number // 每次旋转角度

    minRotate?: number // 最小旋转角度

    maxRotate?: number // 最大旋转角度

    translateTouchType?: 'mousewheel' | 'shift' | 'alt' | 'shift+mousewheel' | 'ctrl+shift+mousewheel' | 'ctrl+alt+mousewheel' // 滚轮缩放触发类型



$3

bash





ImageViewerUtil



此类使用原生 js 实现，不依赖任何第三方库



包含：图片预览、放大、缩小、旋转、拖动功能



使用方式



$3

bash

引入dist/ImageViewerUtil.js，详见：examples/purehtml/index.html

$3

bash

import { ImageViewerUtil } from 'react-image-viewers'





API



$3

bash

const imageContainer = ' 外层dom元素'

const image = ' dom元素'

const config = {

    imageContainerNode: imageContainer,

    imageNode: image,

    onLoadStart: () => {

        // 图片加载中，loading

    },

    onLoad: () => {

        // 图片加载完成，loading 取消

    },

    onLoadError: () => {

        // 图片加载出错

    },

    onStyleChange: () => {

        // 图片放大、缩小、旋转、拖动回调

    },

}

const imageViewerUtil = new ImageViewerUti(config)





$3



切换上一张、下一张图片均自己控制

bash

const imageUrl = '图片地址'

imageViewerUtil.update({ url: imageUrl })

$3

bash

imageViewerUtil.setLarge()

$3

bash

imageViewerUtil.setSmall()

$3

bash

imageViewerUtil.setReset()

$3

bash

imageViewerUtil.setRotate()

$3

bash

imageViewerUtil.destory()

$3

bash

imageViewerUtil.setDebug(true)

$3

bash

const timeout = 3000 // 3s后显示图片

imageViewerUtil.setTimeout(timeout)

$3

bash

imageViewerUtil.setConfig({

    # perScale: 3, // 每次缩放比例

    # minScale: 2, // 最小缩放比例

    # maxScale: 7, // 最大缩放比例

    # perRotate: 10, // 每次旋转角度

    # minRotate: 0, // 最小旋转角度

    # maxRotate: 180, // 最大旋转角度

    # translateTouchType: 'shift+mousewheel', // 'mousewheel' | 'shift+mousewheel' | 'alt+mousewheel' | 'ctrl+shift+mousewheel' | 'ctrl+alt+mousewheel' // 滚轮缩放触发类型，默认mousewheel

})