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反对自定义图片格式输入