Vue3数字签名

最新推荐文章于 2024-08-09 07:05:20 发布

maowei-2001

最新推荐文章于 2024-08-09 07:05:20 发布

阅读量254

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_59246072/article/details/139683231

版权

下载插件：cnpm install vue-esign --save

网页展示

代码：

<template>
  <div>
    <vue-esign ref="esign" :width="900" :height="200" :isCrop="isCrop" ::lineWidth="6"
               lineColor="#000000"
               bgColor="#ffffff"
               style="border:3px dashed #ccc"
               />

    <button @click="handleGenerate">生成图片</button>

    <div style="margin-top: 20px">
      img: <img :src="resultImg" alt="result"/>
    </div>

  </div>
</template>

<script setup>
import { ref ,onMounted } from 'vue'
import vueEsign from 'vue-esign'

const esign = ref()
const resultImg = ref('')
const isCrop = ref(true)

//  生成图片
const handleGenerate = () => {
  esign.value.generate().then(res => {
    console.log(res)
    resultImg.value = res
  })
}

//  绘制区域样式
const drawBackground = () => {
  let ctx=esign.value.canvasTxt

  // 设置背景文字的样式
  const fontSize = 30
  ctx.font = `${fontSize}px Arial`
  ctx.fillStyle = '#ccc' // 透明灰色背景文字

  // 获取要绘制的背景文字
  const backgroundText = '签名区'

  // 将文字绘制在Canvas的中心位置
  const textWidth = ctx.measureText(backgroundText).width
  const canvasCenterX = esign.value.width / 2
  const canvasCenterY = esign.value.height / 2
  const textX = canvasCenterX - textWidth / 2
  const textY = canvasCenterY + fontSize / 3

  ctx.fillText(backgroundText, textX, textY)
}

onMounted(() => {
  drawBackground()
})

</script>