<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>
支持页面内单独引用:`import VueImageHandler from 'vue-image-handler'`