vue+canvas 移动端手写签名，合并图片_vue canvas签名合成文字图片-优快云博客

本文链接：https://blog.youkuaiyun.com/xfmuchengxue/article/details/95175455

本文介绍了如何使用Vue和Canvas在移动端实现手写签名功能，包括清除签名、保存签名图片以及将多张图片合并为一张。用户可以进行重签和提交操作，提交时会将所有签名图片合并后传递给前一页展示。

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

<template>
  <div class="sign">
    <div class="header">
        <i class="el-icon-arrow-left backImg" @click="goBack"></i>
        <span class="title">个人签名</span>
    </div>
    <section class="signature">
        <div class="signatureBox">
            <div class="canvasBox" ref="canvasHW">
                <canvas ref="canvasF" class="canvasStyle" @touchstart='touchStart' @touchmove='touchMove' @touchend='touchEnd' @mousedown="mouseDown" @mousemove="mouseMove" @mouseup="mouseUp"></canvas>
            </div>
        </div>
    </section>
    <div class="btnBox">
        <div @click="overwrite" class="btn1">重置</div>
        <div @click="commit" class="btn1">确定</div>
    </div>
    <div class="imglist-box" :style="imgUrlList.length>0 ? 'border: 1px solid #d9d9d9;' : ''">
      <img v-for="i in imgUrlList" class="imgCanvas" :src="i">
      <img v-show="imgUrlList.length>0" src="../../assets/img/signdelete.png" class="resign" @click="deleteAll">
    </div>
    <div class="tijiao-box">
      <button @click="commitAll" class="tijiao">提 交</button>
    </div>
  </div>
</template>
<script>
import { Bus } from '@/utils'
export default {
  name:'personsign',
  data() {
      return {
        stageInfo:'',
        imgUrl:'',
        imgUrlList:[],
        client: {},
        points: [],
        canvasTxt: null,
        startX: 0,
        startY: 0,
        moveY: 0,
        moveX: 0,
        endY: 0,
        endX: 0