vue3实现手写签名并且保存到本地

原创已于 2024-04-15 17:41:01 修改 · 443 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

于 2024-04-15 17:40:46 首次发布

这篇文章介绍了如何使用Vue.js结合HTML5canvasAPI创建一个简单的绘图应用，用户可以绘制线条并实现鼠标操作下的实时保存图片功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
    <canvas ref="canvas" id="canvas" width="600" height="500" class="pink"></canvas>
    <el-button type="primary" @click="savePath">保存</el-button>
</template>
<script setup>
  import {ref,onMounted} from 'vue'
  const canvas = ref(null)
  let ctx = null
  let isDown = false
  onMounted(()=>{
    init()
  })

  const init = () => {
    ctx = canvas.value.getContext('2d')
    ctx.lineWidth = 2; //直线的宽度状态设置
    ctx.fillStyle = "#ccc"; //直线的颜色状态设置
    ctx.strokeStyle = "#000"; //直线的颜色状态设置
    ctx.lineCap = 'round';
    ctx.fillRect(0, 0, 600, 500);
    draw()
  }
  
  const draw = () => {
    canvas.value.addEventListener('mousedown', (e) => {
      isDown = true
      ctx.beginPath()
      ctx.moveTo(e.offsetX, e.offsetY);
    })
    canvas.value.addEventListener('mousemove', (e) => {
      if (isDown) {
          ctx.lineTo(e.offsetX, e.offsetY);
          ctx.stroke()
      }
    })
    document.documentElement.addEventListener('mouseup', (e) => {
      isDown = false
    })
  }

  const savePath = () => {
    const url = canvas.value.toDataURL("image/png")
    const a = document.createElement('a')
    document.body.appendChild(a)
    a.href = url
    a.download = 'canvas'
    a.click()
  }
</script>
<style lang="scss" scoped>
.pink{
  background-color: pink;
  margin-top:10px
}
</style>