A Vue-based image cropping and background color removal plugin

vue-image-handler

A plug-in that supports custom cropping and background removal of pictures

github address (thanks to star)

online preview

installation

npm install vue-image-handler
# 或者
yarn add vue-image-handler

Used in vue project

// main.js
// 全局安装使用
import VueImageHandler from 'vue-image-handler'
Vue.use(VueImageHandler)

// 页面单独引入使用
import VueImageHandler from 'vue-image-handler'
// ...省略其他代码
components: { VueImageHandler }

Attributes

name	Features	Defaults	Types of	Optional value
canvas-width	Canvas width	380px	String
canvas-height	Height of the canvas	252px	String
img-file	Picture resource		Blob/File/String
wipe-color	Background color to be removed		String	white/black
color-diff	Tolerance value to remove the background color	20	Number	1-100
option	Other configurations (see the table below for specific configuration parameters)		Object

Option

name	Features	Defaults	Types of	Optional value
outputQuality	Image quality after processing	1	Number	0.1-1
outputType	Picture format after processing	png	String	jpeg/png/webp
canMove	Whether the picture can be moved	true	Boolean	true/false
fixedBox	Fixed screenshot frame size	false	Boolean	true/false
cropWidth	Screenshot frame width	380	Number/String	380
cropHeight	Screenshot frame height	252	Number/String	252

Events (called this.$refs[your ref name].[method]

Method name	Description	parameter
rotate	Rotate 90°
download	Download the processed image
getImageUrl	Get the processed image Base64
clear	Clear the canvas and preview image
refresh	Refresh the canvas

Get started quickly

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

Update log

1.2.8

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

Update soon

1. download and getImageUrl support custom image format output