制作海报

    import { qrcanvas } from 'qrcanvas';
    import html2canvas from 'html2canvas';

• 生成二维码

        created() {
            this.getQrCodeHandler();
        },

        getQrCodeHandler() {
            let that = this;
            that.$nextTick(() => {
                var imgCode = document.querySelectorAll('.img-box-code');
                imgCode.forEach(item => {
                    var canvas1 = qrcanvas({
                        data: 生成二维码的地址,
                        size: 33
                    });
                    item.innerHTML = '';
                    item.appendChild(canvas1);
                });
                // this.mateImgHandler();
            });
        },
        // 手势开始
        touchstartHandler(e) {
            // console.log(e);
            e.preventDefault();
            this.startTime = e.touches[0].clientX;
            // let imgBoxName = e.target.parentElement.className;
            // let baseSrc = e.target.src;
            this.timer = setTimeout(() => {
                if (!this.birdFlag) {
                    this.$webridge.showLoadingDialog('加载中...');
                    if (e.target.parentElement.className == 'img-box') {
                        this.mateImgHandler(e.target.parentElement, 'savePicture', 0);
                    } else if (e.target.parentElement.parentElement.className == 'img-box') {
                        this.mateImgHandler(e.target.parentElement.parentElement, 'savePicture', 0);
                    } else {
                        this.mateImgHandler(e.target.parentElement.parentElement.parentElement, 'savePicture', 0);
                    }
                } else {
                    console.log('我正在移动');
                }
            }, 700);
        },
        touchmoveHandler(e) {
            this.endTime = e.touches[0].clientX;
            if (Math.abs(this.startTime - this.endTime) >= 30) {
                this.birdFlag = true;
            }
        },
        // 手势结束
        touchendHandler() {
            clearTimeout(this.timer);
            this.birdFlag = false;
            console.log('清除定时');
        },
        // 生成图片的连接
        mateImgHandler(ImageTarget, action, str) {
            // 所有要生成图片的元素
            // console.log(ImageTarget);
            let width = ImageTarget.offsetWidth;
            let height = ImageTarget.offsetHeight;
            var opts = {
                useCORS: true, // 【重要】开启跨域配置
                 width,
                height: height,
                backgroundColor: '#FDF1E9'
            };
            html2canvas(ImageTarget, opts).then(canvas => {
                var baseSrc = canvas.toDataURL();
                this.getPutToken(baseSrc, action, str);
            });
        },
        // 获取token
        getPutToken(pic, action, str) {
            let that = this;
            // var pic = '填写你的base64后的字符串';
            var url = '地址';
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function() {
                console.log(xhr.readyState)
                if (xhr.readyState == 4) {
                    // console.log(xhr.responseText);
                    if(JSON.parse(xhr.responseText).statusCode == 200){
                        let putb64token = JSON.parse(xhr.responseText).data.uptoken;
                        that.putb64(pic, putb64token, action, str);
                    }else {
                        that.$webridge.hideLoadingDialog();
                        that.toast('图片上传失败，请重试')
                    }
                    
                }
            };
            xhr.open('GET', url, true);
            xhr.setRequestHeader('Content-Type', '*');
            xhr.send();
        },
        putb64(pic, putb64token, action, str) {
            // console.log(putb64token);
            let that = this;
            var picUrl = pic.split(';base64,')[1];
            // console.log(picUrl);
            var url = '//upload.qiniup.com/putb64/-1';
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4) {
                    // console.log(xhr.responseText);
                    if(JSON.parse(xhr.responseText).key){
                        let src = '域名' + JSON.parse(xhr.responseText).key;
                        that.seedImgSrcHadnler(src, action, str);
                    }else {
                        that.toast('图片上传失败，请重试')
                    }
                }
            };
            xhr.open('POST', url, true);
            xhr.setRequestHeader('Content-Type', 'application/octet-stream');
            xhr.setRequestHeader('Authorization', 'UpToken ' + putb64token);
            xhr.send(picUrl);
        }