乐趣区

关于vue.js:一个基于vue的图片裁剪和去底色插件

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

退出移动版