99 lines
2.6 KiB
Markdown
99 lines
2.6 KiB
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'
|
|
```
|