IMG VIEWER

Features

• 支持图片放大、缩小、移动以及缩略图功能

• 零依赖，并且支持 typescript

• 能够很好的和 React、Vue、Anguar 前端框架整合

Download

npm install -D img-viewer

Guide

在 html 文件中添加 div#custom-id 元素。

<div id="custom-id"></div>

在 javascript 文件中引入 img-viewer。

import ImgViewer from 'img-viewer'

// or add css in the html file
import 'img-viewer/lib/imgViewer.css'

const container = document.querySelector('#custom-id')
const imageViewer = new ImgViewer(container, {
  url: 'the/path/to/your/image/url.png'
})

Documents

class：ImgViewer

构造函数，用于生成图片预览实例。用法如下：

const imageViewer = new ImgViewer(container, options)

• container: HTMLDivElement 类型，用于设置图片预览的容器元素。

• options：生成图片预览实例的配置项。

选项	是否必选	类型	默认值	含义
url	是	string	无	预览图片 url
zoomValue	否	number	100	初始图片放大倍数
snapView	否	boolean	true	是否显示缩略图
maxZoom	否	number	1000	最大放大百分比
minZoom	否	number	50	最小放大半分比
refreshOnResize	否	boolean	ture	窗口尺寸改变后是否调整图片大小
zoomOnMouseWheel	否	boolean	true	通过鼠标滚轮调整图片缩放
beforeload	否	function	noop*	图片加载前的钩子函数*  () => {}
loaded	否	function	noop	图片成功加载的钩子函数  (image: HTMLImageElement) => {}
failed	否	function	noop	图片加载失败额钩子函数*  (error: Error) => {}

*noop is...

const noop = () => {}

instance methods

resetZoom:

将放大缩小倍数设置回初始值，也就是 options 中的 zoomValue 值。

example

imageViewer.resetZoom()

zoom

public zoom(value: number | string): void {}

调用该方法可以对图片进行放大缩小，第一个参数可以是一个keyValue，或者一个介于 minZoom 和 maxZoom 之间值。keyValue 包括如下：

• original：将图片缩放为图片原始大小，但是不能够超出 minZoom ~ maxZoom 范围。

• contain：容器整个包裹图片。

• cover：图片覆盖整个容器。

zoomIn

public zoomIn() {}

放大图片

zoomOut

public zoomOut() {}

缩小图片

load

public load(imgUrl: string) {}

更换预览图片

Integration

React

import React from 'react'
import ImgViewer from 'img-viewer'

class ImageViewer extends React.Component {
  componentDidMount() {
    this.loadImage()
  }
  loadImage() {
    const { container } = this
    this.imageViewer = new ImgViewer(container, {
      url: this.props.url,
      zoomValue: 100,
      beforeload() {
        // set loading status
      },
      loaded() {
        // toggle loading
      },
      failed() {
        // set load fail status
      }
    })
  }
  render() {
    return (
      <div
        ref={ref => {this.container = ref}}
      ></div>
    )
  }
}

Vue

// 待补充

Angular

// 待补充

License

MIT