vue+canvas实现签名+横屏签名旋转

1、HTML

　2、JS

export default {

    data () {
        return {
            signSrc: '',//生成的图片地址
            cxt: null,
            canvas: null,
            keyFrom: '',
            height: 600,
            srcurl: '',
        }
    },

    mounted () {
          this.createCanvas();
    },

    methods: {

        //点击保存图片
        saveCanvas () {
            this.srcurl = this.canvas.toDataURL('image/png');
            const loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            this.rotateBase64(this.canvas.toDataURL('image/png')).then((img) => {
                this.signSrc = img;
                this.uploadData(res => {
                    let data = {
                        FILE_CODE_IMAGE: res
                    };
                    api.uploadPutqrcode(data).then(re => {
                        loading.close();
                    })
                })
            });
        },

        //将base64图片旋转90度以后上传
        rotateBase64 (data) {
            return new Promise((resolve) => {
                const imgView = new Image();
                imgView.src = data;
                const canvas = document.createElement('canvas');
                const context = canvas.getContext('2d');
                const cutCoor = { sx: 0, sy: 0, ex: 0, ey: 0 }; // 裁剪坐标
                imgView.onload = () => {
                    const imgW = imgView.width;
                    const imgH = imgView.height;
                    const size = imgH;
                    canvas.width = size * 2;
                    canvas.height = size * 2;
                    cutCoor.sx = size;
                    cutCoor.sy = size - imgW;
                    cutCoor.ex = size + imgH;
                    cutCoor.ey = size + imgW;
                    context.translate(size, size);
                    context.rotate(Math.PI / 2 * 3);
                    context.drawImage(imgView, 0, 0);
                    const imgData = context.getImageData(cutCoor.sx, cutCoor.sy, cutCoor.ex, cutCoor.ey);
                    canvas.width = imgH;
                    canvas.height = imgW;
                    context.putImageData(imgData, 0, 0);
                    resolve(canvas.toDataURL('image/png'));
                };
            });
        },



        //图片上传
        uploadData (callback) {
            let form = new FormData();
            form.append('file_name', '签名.png');
            form.append('file_size', 5000);
            form.append('file_ext', '.png');
            form.append('url', this.signSrc);
            let config = {
                headers: {
                    "Content-Type": "multipart/form-data",
                },
            };
            this.$axios.post(url, form, config).then((res) => {
                callback && callback(res.data.data.data)
            })
        },

        //清空画板
        clearCanvas () {
            this.cxt.clearRect(0, 0, this.canvas.width, 600);
            this.cxt.fillRect(0, 0, this.canvas.width, 600);
        },

        //初始化canvas
        createCanvas () {
            this.canvas = document.createElement("canvas");
            this.el.appendChild(this.canvas);
            this.cxt = this.canvas.getContext("2d");
            this.canvas.width = this.el.clientWidth;
            this.canvas.height = this.height - 200;
            // this.cxt.fillStyle = "#ECF2FE";
            this.cxt.fillStyle = 'rgba(255, 255, 255, 0)'
            this.cxt.fillRect(0, 0, this.canvas.width, 600);
            this.cxt.strokeStyle = "#000000";
            this.cxt.lineWidth = 2;
            this.cxt.lineCap = "round";
            this.canvas.addEventListener("touchstart", function (e) {
                this.cxt.beginPath();
                this.cxt.moveTo(e.changedTouches[0].pageX + 2, e.changedTouches[0].pageY);
            }.bind(this), false);

            this.canvas.addEventListener("touchmove", function (e) {
                this.cxt.lineTo(e.changedTouches[0].pageX + 2, e.changedTouches[0].pageY);
                this.cxt.stroke();
            }.bind(this), false);

        },

    }
}