制作海报

    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: 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);
        }