移动端VUE-H5手写电子签名的实现（生成base64图片）- 竖版

实现形式：html页面中引入vue方式

一、核心代码 - html部分

    <div class="main" id="vueApp" v-cloak>
        <div class="page" ref="page">
            <canvas ref="signHandle" class="canvas" ></canvas>
            <div class="btn_container van-hairline--top">
                <van-button class="button" size="normal" @click="clearHandle">清空</van-button>
                <van-button class="button button-right" size="normal" type="info" @click="onComfirm">确认</van-button>
            </div>
        </div>
    </div>

二、核心代码 - js部分

<script type="text/javascript">
    apiready = function () {
        vueFunction()
    };

    function vueFunction() {
        new Vue({
            el: '#vueApp',
            data() {
                return {
                    radio: '#000',
                    height: 50,
                    direction: true, // true 代表横屏, false 代表'竖屏' -- 但是亲测没有效果
                    el: '', // canvas dom
                    ctx: '', // canvas context
                    background: '#fff', // canvas background-color
                    color: '#000', // 绘制时线条的颜色
                    linewidth: 3, // 线条的宽度
                    liColors: ['#000'],
                    drawCheck: false, //用来判断是否签字
                    clientHeight: document.documentElement.clientHeight,
                    clientWidth: document.documentElement.clientWidth
                }
            },
            created() {

            },
            mounted() {
                window.onresize = () => {
                    this.clientHeight = document.documentElement.clientHeight
                    this.clientWidth = document.documentElement.clientWidth
                    this.draw()
                    return
                }
                this.draw()
            },
            methods: {
                // 添加绘制 line
                draw() {
                    this.$refs.signHandle.addEventListener(
                        'touchstart',
                        e => e.preventDefault(),
                        {
                            passive: false
                        }
                    )
                    this.el = this.$refs.signHandle
                    this.initCanvas()
                },
                // 初始化canvas配置
                initCanvas() {
                    const { height, direction, el } = this
                    el.width = this.clientWidth
                    el.height = this.clientHeight - 50
                    this.ctx = el.getContext('2d')
                    this.setCanvas()
                    this.drawStart()
                    this.drawing()
                    this.drawEnd()
                },
                // 配置 canvas
                setCanvas() {
                    const { ctx, height, direction } = this
                    console.log(direction)
                    // 设置背景色
                    ctx.fillStyle = this.background
                    ctx.fillRect(0, 0, this.clientWidth, this.clientHeight - 50)
                    // 设置线条颜色
                    ctx.strokeStyle = this.color
                    // 设置线宽
                    ctx.lineWidth = this.linewidth
                    // 设置线条两头的结束点和开始点是圆形的
                    ctx.lineCap = 'round'
                },
                // 开始绘制
                drawStart() {
                    const { el, ctx } = this
                    el.addEventListener(
                        'touchstart',
                        e => {
                            ctx.beginPath()
                            ctx.moveTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY)
                            this.drawCheck = true //代表签过字
                        },
                        false
                    )
                },
                // 绘制中
                drawing() {
                    const { el, ctx } = this
                    el.addEventListener(
                        'touchmove',
                        e => {
                            ctx.lineTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY)
                            ctx.stroke()
                        },
                        false
                    )
                },
                // 绘制结束
                drawEnd() {
                    const { el, ctx } = this
                    el.addEventListener('touchend', () => ctx.closePath(), false)
                },
                // 清空
                clearHandle() {
                    console.log('清空')
                    this.initCanvas()
                    this.drawCheck = false //代表签过字
                },
                onComfirm() {
                    if (this.drawCheck == false) {
                        Toast.fail('请确保已经签字')
                        return
                    }
                    this.saveImg()
                    // this.adminSave()
                },
                // 保存信息
                saveImg() {
                    const imgBase64 = this.el.toDataURL()
                    console.log(imgBase64)
                },
            }
        })

    }

</script>

三、全部代码（html文件）

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>Hello APP</title>

    <script type="text/javascript" src="../../script/vue.js"></script>
    <link rel="stylesheet" href="../../css/index.css" />
    <link rel="stylesheet" href="../../css/base.css" />
    <script src="../../script/vant.min.js"></script>
    <style>
        .page {
            height: 100vh;
            width: 100vw;
        }

        .btn_container {
            width: 100%;
            position: fixed;
            bottom: 0;
            left: 0;
            background-color: #fff;
            display: flex;
            align-items: center;
            padding: 0 8px;
            box-sizing: border-box;
            justify-content: space-between;
        }

        .button {
            width: 50%;
        }

        .button-right {
            margin-left: 4px;
        }
        .button-wrapper {
            min-width: 180px;
            display: flex;
            justify-content: space-between;
        }
    </style>
</head>

<body>
    <div class="main" id="vueApp" v-cloak>
        <div class="page" ref="page">
            <canvas ref="signHandle" class="canvas" ></canvas>
            <div class="btn_container van-hairline--top">
                <van-button class="button" size="normal" @click="clearHandle">清空</van-button>
                <van-button class="button button-right" size="normal" type="info" @click="onComfirm">确认</van-button>
            </div>
        </div>
    </div>

</body>
<script type="text/javascript" src="../../script/config.js"></script>
<script type="text/javascript">
    apiready = function () {
        vueFunction()
    };

    function vueFunction() {
        new Vue({
            el: '#vueApp',
            data() {
                return {
                    radio: '#000',
                    height: 50,
                    direction: true, // true 代表横屏, false 代表'竖屏' -- 但是亲测没有效果
                    el: '', // canvas dom
                    ctx: '', // canvas context
                    background: '#fff', // canvas background-color
                    color: '#000', // 绘制时线条的颜色
                    linewidth: 3, // 线条的宽度
                    liColors: ['#000'],
                    drawCheck: false, //用来判断是否签字
                    clientHeight: document.documentElement.clientHeight,
                    clientWidth: document.documentElement.clientWidth
                }
            },
            created() {

            },
            mounted() {
                window.onresize = () => {
                    this.clientHeight = document.documentElement.clientHeight
                    this.clientWidth = document.documentElement.clientWidth
                    this.draw()
                    return
                }
                this.draw()
            },
            methods: {
                // 添加绘制 line
                draw() {
                    this.$refs.signHandle.addEventListener(
                        'touchstart',
                        e => e.preventDefault(),
                        {
                            passive: false
                        }
                    )
                    this.el = this.$refs.signHandle
                    this.initCanvas()
                },
                // 初始化canvas配置
                initCanvas() {
                    const { height, direction, el } = this
                    el.width = this.clientWidth
                    el.height = this.clientHeight - 50
                    this.ctx = el.getContext('2d')
                    this.setCanvas()
                    this.drawStart()
                    this.drawing()
                    this.drawEnd()
                },
                // 配置 canvas
                setCanvas() {
                    const { ctx, height, direction } = this
                    console.log(direction)
                    // 设置背景色
                    ctx.fillStyle = this.background
                    ctx.fillRect(0, 0, this.clientWidth, this.clientHeight - 50)
                    // 设置线条颜色
                    ctx.strokeStyle = this.color
                    // 设置线宽
                    ctx.lineWidth = this.linewidth
                    // 设置线条两头的结束点和开始点是圆形的
                    ctx.lineCap = 'round'
                },
                // 开始绘制
                drawStart() {
                    const { el, ctx } = this
                    el.addEventListener(
                        'touchstart',
                        e => {
                            ctx.beginPath()
                            ctx.moveTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY)
                            this.drawCheck = true //代表签过字
                        },
                        false
                    )
                },
                // 绘制中
                drawing() {
                    const { el, ctx } = this
                    el.addEventListener(
                        'touchmove',
                        e => {
                            ctx.lineTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY)
                            ctx.stroke()
                        },
                        false
                    )
                },
                // 绘制结束
                drawEnd() {
                    const { el, ctx } = this
                    el.addEventListener('touchend', () => ctx.closePath(), false)
                },
                // 清空
                clearHandle() {
                    console.log('清空')
                    this.initCanvas()
                    this.drawCheck = false //代表签过字
                },
                onComfirm() {
                    if (this.drawCheck == false) {
                        Toast.fail('请确保已经签字')
                        return
                    }
                    this.saveImg()
                    // this.adminSave()
                },
                // 保存信息
                saveImg() {
                    const imgBase64 = this.el.toDataURL()
                    console.log(imgBase64)
                },
            }
        })

    }

</script>

</html>

四、实现效果

1.签名页面

2.生成的图片