Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Jocs/view-image
An image viewer to zoom in and zoom out images.
https://github.com/Jocs/view-image
Last synced: 3 days ago
JSON representation
An image viewer to zoom in and zoom out images.
- Host: GitHub
- URL: https://github.com/Jocs/view-image
- Owner: Jocs
- Created: 2018-08-21T17:19:59.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2018-08-27T14:18:29.000Z (about 6 years ago)
- Last Synced: 2024-10-31T00:51:05.391Z (4 days ago)
- Language: JavaScript
- Size: 190 KB
- Stars: 6
- Watchers: 0
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
VIEW IMAGE
A tool to help you better preview your images
## Features
* 支持图片放大、缩小、移动以及缩略图功能
* 零依赖，并且支持 typescript
* 能够很好的和 React、Vue、Anguar 前端框架整合
## Download
```sh
npm install -D view-image
```
## Guide
在 html 文件中添加 `div#custom-id` 元素。
```html
```
在 javascript 文件中引入 `view-image`。
```javascript
import ViewImage from 'view-image'
// or add css in the html file
import 'view-image/lib/imgViewer.css'
const container = document.querySelector('#custom-id')
const imageViewer = new ViewImage(container, {
url: 'the/path/to/your/image/url.png'
})
```
## Documents
#### class：ViewImage
构造函数，用于生成图片预览实例。用法如下：
```javascript
const imageViewer = new ViewImage(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...
```javascript
const noop = () => {}
```
#### instance methods
**resetZoom**:
将放大缩小倍数设置回初始值，也就是 options 中的 zoomValue 值。
example
```javascript
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**
```javascript
import React from 'react'
import ImgViewer from 'view-image'
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 (
{this.container = ref}}
>
)
}
}
```
**Vue**
// 待补充
**Angular**
// 待补充
## License
**MIT**