造个小轮子，canvas生成电子签名，满足需求

优化需求，内容是生成电子签名，发现好多个项目都重复写，于是打算自己造个小轮子，名字就叫vue-asign，说明文档如下：

vue-asign

Canvas 生成电子签名

支持vue2、vue3

演示demo

功能

1. 适配 PC 和 Mobile；
2. 自定义画布尺寸（导出图尺寸），画笔粗细、颜色，画布背景色；
3. 默认裁剪内容区域 ，可自定义周围边距或者设置不裁剪。
4. 导出图片格式为 base64；

安装

npm install vue-asign --save
1

使用

1. 全局使用 、局部

// 全局 vue2 main.js
import asign from 'vue-asign'
Vue.use(asign)
// 全局vue3 main.js
import App from './App.vue'
import asign from 'vue-asign'
const app = createApp(App)
app.use(asign)
// 局部
import asign from 'vue-asign'
components: { asign }
1
2
3
4
5
6
7
8
9
10
11

3. 说明

注：isCrop为true时，图片宽高由实际内容决定。

两个内置方法，通过给组件设置 ref 调用：

<vueAsign ref="asign" :width="500" :height="300" :lineWidth="1" :lineColor="'red'" :bgColor="'green'" />
1

清空画布

this.$refs.asign.clearCanvas()

1
2

生成图片

this.$refs.asign.createImg().then(res=>{
        this.resImg = res
})

1
2
3
4

源码地址：
gitee
github