Gao-canvas-sign NPM

vue3签名组件

安装

pnpm install gao-canvas-sign

使用

<template>
   <Sign ref="signRef" color="#000" :lineWidth="2" background-color="#ccc" :width="100" :height="300"></Sign>
</template>

<script>
import { ref } from 'vue';
import Sign from './Sign/index.vue'
let signRef = ref<InstanceType<typeof Sign>>()


function getUrl() {
  // 获取临时url地址
  let url = signRef.value!.getUrl()
  console.log('url::::::::::::::::', url)
}

function getBlob() {
  signRef.value?.getBlob().then(blob => {
    console.log('blob::::::::::::::::', blob)
    // 转成file对象  用于文件上传
    let file = new File([blob!], 'sign.png', { type: 'image/png' })
    console.log('file::::::::::::::::', file)
  })
}
</script>

参数

参数名	说明	类型	默认值
color	签名文字颜色	string	#000
lineWidth	签名线条宽度	number	2
background-color	签名区域背景颜色	string	#ccc
width	签名区域宽度	number	300
height	签名区域高度	number	300