• canvas 實(shí)現(xiàn)電子簽名
  坑點(diǎn)：不能直接在css中設(shè)置canvas的width, height硝清，否則畫布中鼠標(biāo)定位不準(zhǔn)
  代碼如下：

<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 對象减响，表示指定的媒體查詢字符串解析后的結(jié)果
                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
                
                // 監(jiān)聽橫豎屏切換事件
                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畫布耐亏，當(dāng)改變畫布的長度或者寬度時徊都，畫布的內(nèi)容會消失
                // 解決方案1：把變化之前的畫布內(nèi)容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：創(chuàng)建一個新的canvas广辰，把變化之前的畫布內(nèi)容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
  坑點(diǎn)：
  1. 若圖片跨域，則截圖空白李根，解決方案：圖片服務(wù)器設(shè)置允許跨域槽奕，圖片渲染設(shè)置跨域<img crossOrigin="anonymous" :src="src + '?time=' + new Date().valueOf()" alt="" />
  2. 若頁面有滾動條，則截圖不全房轿，解決方案：用一個div維護(hù)需要轉(zhuǎn)canvas的dom粤攒，觸發(fā)下載時讓頁面回到頂部，下載完再回到相應(yīng)位置（如底部：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))
                });
          },