在Vue项目中实现手写签名

前言

上过保险，尤其是车险的朋友应该都遇到过这样一个场景：用户确认完保单后，需要在手机上手写自己的签名，然后提交保单。那么，如何在前端实现这个功能呢？今天，带大家使用一下 sign-canvas 这个插件。

第一步 安装依赖

使用下面的命令进行依赖安装（pnpm, npm，cnpm也可以）

yarn add sign-canvas

第二步 引入组件

全局注册，使用下面的代码：

//全局注册 main.js
import SignCanvas from "sign-canvas";
Vue.use(SignCanvas);

局部注册，使用下面的代码：

//局部注册
import SignCanvas from "sign-canvas";
components: {
    SignCanvas;
}

第三步 使用组件

<template>
    <div>
        <sign-canvas
            class="sign-canvas"
            ref="signCanvasRef"
            :options="options"
            v-model="signCanvasVal"
        />
        <button @click="handleCancel">取消</button>
        <button @click="handleClear">清空</button>
        <button @click="handleConfirm">确认</button>
        <button @click="handleSave">下载图片</button>
    </div>
</template>
<script>
export default {
    data() {
        signCanvasVal: null,
        options: {
            isDpr: false, //是否使用dpr兼容高倍屏 [Boolean] 可选
            lastWriteSpeed: 1, //书写速度 [Number] 可选
            lastWriteWidth: 2, //下笔的宽度 [Number] 可选
            lineCap: "round", //线条的边缘类型 [butt]平直的边缘 [round]圆形线帽 [square]    正方形线帽
            lineJoin: "bevel", //线条交汇时边角的类型  [bevel]创建斜角 [round]创建圆角 [miter]创建尖角。
            canvasWidth: 350, //canvas宽高 [Number] 可选
            canvasHeight: 370, //高度  [Number] 可选
            isShowBorder: true, //是否显示边框 [可选]
            bgColor: "#fcc", //背景色 [String] 可选
            borderWidth: 1, // 网格线宽度  [Number] 可选
            borderColor: "#ff787f", //网格颜色  [String] 可选
            writeWidth: 5, //基础轨迹宽度  [Number] 可选
            maxWriteWidth: 30, // 写字模式最大线宽  [Number] 可选
            minWriteWidth: 5, // 写字模式最小线宽  [Number] 可选
            writeColor: "#101010", // 轨迹颜色  [String] 可选
            isSign: true, //签名模式 [Boolean] 默认为非签名模式,有线框, 当设置为true的时候没有任何线框
            imgType: "png", //下载的图片格式  [String] 可选为 jpeg  canvas本是透明背景的
        },
    },
    methods: {
        handleCancel() {},
        handleClear() {
            this.$refs.signCanvasRef.canvasClear();
        },
        handleConfirm() {
            // 请注意，这里saveAsImg()方法，返回的是 base64 的图片格式
            let img = this.$refs.signCanvasRef.saveAsImg();
        },
        handleSave() {
            this.$refs.SignCanvas.downloadSignImg();
        }
    }
}
</script>

上面是具体属性配置参数，大家可以参考

最后

本文只是对 sign-canvas 这个插件的简单使用，更多内容，大家可以参考文末的官方库。

文章首发地址： https://www.cikayo.com/article/179

手写签名板 vue-sign-canvas: https://github.com/langyuxiansheng/vue-sign-canvas