共计 2161 个字符，预计需要花费 6 分钟才能阅读完成。
vue-image-handler
一个反对图片自定义裁剪和去底色的插件
github 地址（感激 star）
预览成果
装置
npm install vue-image-handler
# 或者
yarn add vue-image-handler
vue 我的项目中应用
// main.js
// 全局装置应用
import VueImageHandler from 'vue-image-handler'
Vue.use(VueImageHandler)
// 页面独自引入应用
import VueImageHandler from 'vue-image-handler'
// ... 省略其余代码
components: {VueImageHandler}
Attributes
| 名称 | 性能 | 默认值 | 类型 | 可选值 |
|---|---|---|---|---|
| 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 |
Option
| 名称 | 性能 | 默认值 | 类型 | 可选值 |
|---|---|---|---|---|
| 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 |
Events（通过 this.$refs[your ref name].[method] 调用）
| 办法名 | 阐明 | 参数 |
|---|---|---|
| rotate | 旋转 90° | |
| download | 下载解决后的图片 | |
| getImageUrl | 获取解决后的图片 Base64 | |
| clear | 清空画布和预览图 | |
| refresh | 刷新画布 |
疾速上手
<template>
<VueImageHandler
ref="vueImageHandler"
:canvas-width="width"
:canvas-height="height"
:img-file="imgFile"
:wipe-color="wipeColor"
:color-diff="colorDiff"
/>
</template>
<script>
export default {data() {
return {
imgFile: 'https://cdn.jsdelivr.net/gh/cong1223/cloudimg@master/img/20210613092202.png',
wipeColor: '',
colorDiff: 20,
width: '380px',
height: '252px'
};
},
methods: {changeCanvasWidth(e) { // 动静批改画布和预览图的宽度
this.width = e.target.value + 'px';
this.$refs.vueImageHandler.refresh();},
changeCanvasHeight(e) { // 动静批改画布和预览图的高度
this.height = e.target.value + 'px';
this.$refs.vueImageHandler.refresh();},
changeWipeColor(e) { // 动静批改要去的底色（white or black）this.wipeColor = e;
},
changeColorDiff(e) { // 动静批改去底色的容差值
this.colorDiff = +e.target.value;
},
pickImage() { // 从本地抉择图片（input file）this.$refs.filElem.dispatchEvent(new MouseEvent('click'));
},
handleRotate() { // 原图旋转
this.$refs.vueImageHandler.rotate();},
getFile() { // 从本地抉择图片后获取文件信息
const inputFile = this.$refs.filElem.files[0];
if (inputFile) {
this.imgFile = inputFile;
this.$refs.filElem.value = '';
} else {return;}
},
download() { // 下载图片
this.$refs.vueImageHandler.download();},
getUrl() {
this.$refs.vueImageHandler.getImageUrl(url => {console.log('解决后的图片', url);
});
},
clear() { // 清空画布
this.$refs.vueImageHandler.clear();}
}
}
</script>更新日志
1.2.8
反对页面内独自援用：`import VueImageHandler from 'vue-image-handler'`行将更新
1. download 和 getImageUrl 反对自定义图片格式输入
正文完
