Vue-esign手写签字、鼠标写名字目前兼容pc、桌面端（electron）、移动端；可返回base64或者文件流

Vue-esign

手写签字、鼠标写名字

目前兼容pc、桌面端（electron）、移动端；

可返回base64或者文件流

1. 安装：npm install vue-esign –save

2、main.js文件中全局引入：

// （vue2）签字

import vueEsign from 'vue-esign'

Vue.use(vueEsign)

vue3可直接导入后使用

import vueEsign from 'vue-esign'

3、页面内容

<div style="background-color: #ffff;padding-bottom:4px;">

          <vue-esign ref="esign" :width="900" :height="300" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor" :bgColor="bgColor" />

          <div style="margin: 10px">

            <button @click="handleReset" class="mr-[10px] bg-[#1890ff]">清空画板</button>

            <button @click="handleGenerate" class="mr-[10px] bg-[#1890ff]"> 生成图片</button>

          </div>

 </div>

4、Vue3:

/**

 * --------- 签名 ------------

 */
const constlineWidth = 6;

const lineColor = '#000000';

const bgColor = ref('#ffff');

const resultImg = ref('');

const isCrop = false;

const esign = ref();

const qz = () => {};


const handleReset = () => {

  esign.value.reset(); //清空画布

  bgColor.value = '#ffff';

};



/**

 * 将base64转化成图片方法

 */

const base64ImgtoFile = (dataurl, filename = 'file') => {

  const arr = dataurl.split(',');

  const mime = arr[0].match(/:(.*?);/)[1];

  const suffix = mime.split('/')[1];

  const bstr = atob(arr[1]);

  let n = bstr.length;

  const u8arr = new Uint8Array(n);

  while (n--) {

    u8arr[n] = bstr.charCodeAt(n);

  }

  return new File([u8arr], `${filename}.${suffix}`, {

    type: mime,

  });

};



/**

 * 签字生成的base64图片

 */

const handleGenerate = () => {

  esign.value

    .generate()

    .then((res) => {

      resultImg.value = res; // 得到了签字生成的base64图片

      let imgFile = base64ImgtoFile(res, 'file'); //得到文件格式

    })

    .catch((err) => {

      // 没有签名，点击生成图片时调用

      alert(err); // 画布没有签字时会执行这里 'Not Signned'

    });

};