# 电子签名(esign)

Canvas 手写签字 电子签名

# 基本使用

<template>
  <div class="tw-flex tw-justify-center">
    <itv-esign class="tw-border" ref="esign" :width="800" :height="300" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor"></itv-esign>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        lineWidth: 3,
        lineColor: "#000000",
        bgColor: "",
        isCrop: false,
      };
    },
  };
</script>
Expand Copy

# Attributes

属性 类型 默认值 说明
width Number 800 画布宽度,即导出图片的宽度
height Number 300 画布高度,即导出图片的高度
lineWidth 4 Number 画笔粗细
lineColor String #000000 画笔颜色
bgColor String 画布背景色,为空时画布背景透明,
支持多种格式 '#ccc','#E5A1A1','rgb(229, 161, 161)','rgba(0, 0, 0, .6)','red'
isCrop Boolean false 是否裁剪,在画布设定尺寸基础上裁掉四周空白部分

# Events

事件名称 说明 使用方法
reset 清空画布 this.$refs.esign.reset()
generate 生成图片,返回 base64 图片,generate 可选配置参数 ,在未设置 format 或 quality 属性时可在生成图片时配置 例如: {format:'image/jpeg', quality: 0.5} this.$refs.esign.generate({format:'image/jpeg', quality: 0.5}).then(res=>{}).catch(error=>{})

TIP

提示引入插件 vue-esign (opens new window)

上次更新: 12/28/2023, 5:33:41 PM