html2canvas使用流程及注意

步骤

1. 图片路径转base64

getImageBase64(imgurl) {
            let _this = this
            let img = new Image()
            img.setAttribute('crossOrigin', 'anonymous')
            img.onload = function(){
                let canvas = document.createElement("canvas")
                canvas.width = 800
                canvas.height = 800
                let ctx = canvas.getContext("2d");
                ctx.drawImage(img, 0, 0, 800, 800);
                let dataURL = canvas.toDataURL("image/jpeg");
                _this.pictUrl = dataURL
            }
            img.src = imgurl
        },

2、画图

					document.getElementById('qrcode').innerHTML = '';	//清空画布
                    document.getElementById('saveimg').innerHTML = '';
                     window.scrollTo(0, 0);		//防止左右滑动偏移
                _this.qrcode('qrcode',QRCode.CorrectLevel.L);
                    setTimeout(function () {
                        let saveimg = document.getElementById('imgmain_box_');
                        html2canvas(saveimg,{
                            backgroundColor:'#ffffff'	//画布背景色（其他样式）
                        }).then(function (canvas) {
                            let imgDataURI = canvas.toDataURL('image/jpeg');
                            let str = '<img src="'+imgDataURI+'" width="85%" />';
                            document.getElementById('saveimg').innerHTML = str;
                        });
                    },100)