vue-image-handler

$3

github地址（感谢star）

$3


$3

``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


`

更新日志

$3

`
支持页面内单独引用：import VueImageHandler from 'vue-image-handler'
``

即将更新

#### 1. download和getImageUrl支持自定义图片格式输出