## Project setup ``` yarn install vue-image-handler```
npm install vue-image-handler
cmd
npm install vue-image-handler
或者
yarn add vue-image-handler`
$3
`javascript
// main.js
// 全局安装使用
import VueImageHandler from 'vue-image-handler'
Vue.use(VueImageHandler)// 页面单独引入使用
import VueImageHandler from 'vue-image-handler'
// ...省略其他代码
components: { VueImageHandler }
`
$3
| 名称 | 功能 | 默认值 | 类型 | 可选值
| ----- | ----- | ----- | ----- | ----- |
| canvas-width | 画布的宽度 | 380px | String | |
| canvas-height | 画布的高度 | 252px | String | |
|img-file | 图片资源 | | Blob/File/String||
|wipe-color| 要去除的底色||String|white/black|
|color-diff|去底色的容差值|20|Number|1-100|
|option|其他配置(具体配置参数见下表)||Object||
$3
| 名称 | 功能 | 默认值 | 类型 | 可选值
| ----- | ----- | ----- | ----- | ----- |
| outputQuality | 处理后的图片质量 | 1 | Number | 0.1-1 |
| outputType | 处理后的图片格式 | png | String | jpeg/png/webp |
| canMove | 图片是否可以移动 | true | Boolean | true/false |
| fixedBox | 固定截图框大小 | false | Boolean | true/false |
| cropWidth | 截图框宽 | 380 | Number/String | 380 |
| cropHeight | 截图框高 | 252 | Number/String | 252 |
$3
| 方法名 | 说明| 参数 |
| ----- | ----- | ----- |
| rotate | 旋转90° | |
| download | 下载处理后的图片 | |
| getImageUrl | 获取处理后的图片Base64 | |
| clear | 清空画布和预览图 | |
| refresh | 刷新画布 | |快速上手
`vue
ref="vueImageHandler"
:canvas-width="width"
:canvas-height="height"
:img-file="imgFile"
:wipe-color="wipeColor"
:color-diff="colorDiff"
/>
`
更新日志
$3
`
支持页面内单独引用:import VueImageHandler from 'vue-image-handler'
``