canvas 实现电子签名（兼容横竖屏切换）、html2canv

• canvas 实现电子签名
  坑点：不能直接在css中设置canvas的width, height，否则画布中鼠标定位不准
  代码如下：

<template>
    <div class="layer" ref="layer" @touchmove.prevent>
        <canvas
            ref="canvas"
            @touchstart="touchStart"
            @touchmove="touchMove"
            @touchend="touchEnd"
        ></canvas>
        <div class="btn-box">
            <Button type="primary" @click="submit()">去提交</Button>
            <Button @click="clear()">清空</Button>
            <slot></slot>
        </div>
    </div>
</template>

<style scoped lang="scss">
    .layer {
        padding: 20px;
        height: calc(100vh);
    }
    canvas {
        border: 1px solid #ccc;
    }
    .btn-box {
        margin-top: 20px;
        text-align: right;
        button {
            margin-left: 20px;
        }
    }
</style>

<script>
    export default {
        data() {
            return {
                // MediaQueryList 对象，表示指定的媒体查询字符串解析后的结果
                mql: null,
                canvasWidth: null,
                canvasHeight: null,
                canvas: null,
                ctx: null,
                startX: 0,
                startY: 0,
                isSign: false,
            }
        },
        mounted() {
            this.$nextTick().then(() => {
                this.canvas = this.$refs.canvas
                this.ctx = this.canvas.getContext('2d')
                this.ctx.lineWidth = 2
                
                // 监听横竖屏切换事件
                this.mql = window.matchMedia('(orientation: portrait)');
                this.mql.addListener(this.handleOrientationChange);
                this.handleOrientationChange()
            });
        },
        beforeDestroy() {
            this.mql.removeListener(this.handleOrientationChange);
        },
        methods: {
            handleOrientationChange() {
                let stageInfo = this.canvas.getBoundingClientRect()
                this.startX = stageInfo.left
                this.startY = stageInfo.top

                // canvas画布，当改变画布的长度或者宽度时，画布的内容会消失
                // 解决方案1：把变化之前的画布内容copy一份，然后重新画到画布上
                const imgData = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height)
                this.canvas.width = this.$refs.layer.clientWidth - 40
                this.canvas.height = this.$refs.layer.clientHeight - 100
                this.ctx.putImageData(imgData, 0, 0)

                // 解决方案2：创建一个新的canvas，把变化之前的画布内容copy到新canvas上，再把新canvas绘制到变化后的canvas上
                // const nc = document.createElement('canvas')
                // nc.width = this.canvas.width;
                // nc.height = this.canvas.height;
                // nc.getContext('2d').drawImage(this.canvas, 0, 0);
                // this.canvas.width = this.$refs.layer.clientWidth - 40
                // this.canvas.height = this.$refs.layer.clientHeight - 100
                // this.ctx.drawImage(nc, 0, 0);
            },
            touchStart(event) {
                this.ctx.beginPath()
                this.ctx.moveTo(event.touches[0].pageX - this.startX, event.touches[0].pageY - this.startY)
            },
            touchMove(event) {
                this.ctx.lineTo(event.touches[0].pageX - this.startX, event.touches[0].pageY - this.startY)
                this.ctx.stroke()
            },
            touchEnd() {
                this.ctx.closePath()
                this.isSign = true
            },
            submit() {
                if (!this.isSign) {
                    this.$Message.error('您还未签名！')
                    return
                }
                this.$emit('sign', this.canvas.toDataURL('image/png', 1))
            },
            //清除画布
            clear() {
                this.isSign = false
                this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
            },
        }
    }
</script>

• html2canvas
  坑点：
  1. 若图片跨域，则截图空白，解决方案：图片服务器设置允许跨域，图片渲染设置跨域<img crossOrigin="anonymous" :src="src + '?time=' + new Date().valueOf()" alt="" />
  2. 若页面有滚动条，则截图不全，解决方案：用一个div维护需要转canvas的dom，触发下载时让页面回到顶部，下载完再回到相应位置（如底部：window.scrollBy(0, document.body.scrollHeight)）

            getBase64() {
                window.pageYOffset = 0
                html2canvas(document.getElementById('declaration'), {
                    scale: 1,
                    allowTaint: false,
                    taintTest: false,
                    useCORS: true,
                    height: document.getElementById('declaration').clientHeight
                }).then((canvas)=> {
                    console.log(canvas.toDataURL('image/png', 1))
                });
          },