mand-mobile
Version:
A Vue.js 2.0 Mobile UI Toolkit
99 lines (73 loc) • 2.65 kB
Markdown
title: ImageReader
preview: https://didi.github.io/mand-mobile/examples/#/image-reader
For photo album reading or photos taking
### Import
```javascript
import { ImageReader } from 'mand-mobile'
import imageProcessor from 'mand-mobile/lib/image-reader/image-processor'
// Image processing plugin, refer to #imageProcessor for usage
Vue.component(ImageReader.name, ImageReader)
```
### Code Examples
<!-- DEMO -->
### API
#### ImageReader Props
|Props | Description | Type | Default | Note |
|----|-----|------|------|------|
|name|identifier|String|-|used to distinguish multiple readers|
|size|image size limit|String/Number|-|unit `kb`|
|mime|supported image types|Array|`*`|such as `['jpeg','png']`|
|is-camera-only|only support photographing|Boolean|`false`|-|
|is-multiple|support selection of multiple sheets|Boolean|`false`|there is a [compatibility issue](https://caniuse.com/#feat=input-file-multiple)|
|amount|number of sheets|Number|-|valid only when `is-multiple` is `true`|
#### ImageReader Events
##### @select(name, { files })
Picture selection completed, while reading hasn't been started yet
|Parameters | Description | Type| Note|
|-----|-----|-----|-----|
|name|identifier|String|-|
|files|image file objects set|Array<File>|-|
##### @complete(name, { dataUrl, blob, file })
Picture reading completed
|Parameters | Description | Type| Note|
|-----|-----|-----|-----|
|name|identifier|String|-|
|dataUrl|base64|String|-|
|blob|image Blob object for `formData`|Blob|-|
|file|image file object|File|-|
##### @error(name, { code, msg })
Picture selection and reading failed
|Parameters | Description | Type| Note|
|-----|-----|-----|-----|
|name|identifier|String|-|
|code|error identifier|String|-|
|msg|error message|String|-|
### imageProcessor
For image axial correction, picture quality compression and height control
#### Import
```javascript
import imageProcessor from 'mand-mobile/lib/image-reader/image-processor'
/**
* options Image processing configuration
* fn(dataUrl, blob) Process completes callback
* @return Promise({dataUrl, blob})
*/
imageProcessor(options[, fn])
```
#### options
|Props | Description | Type | Note |
|-----|-----|-----|-----|
|dataUrl|base64|String|-|
|width|picture width|Number|unit `px`, scaled when width exceeds|
|height|picture height|Number|unit `px`, scaled when height exceeds|
|quality|picture quality|Number|value range `0-1`|
### Appendix
Picture read failed error code and error message
```
'100': 'browser does not support'
'101': 'picture size is beyond the preset'
'102': 'picture read failure'
'103': 'the number of pictures exceeds the limit'
```