canvas转图片，图片下载完成后生成base64再画图

1.图片转base64：

imgToBase64:function(imgUrl) {
        return new Promise(function(resolve,reject){
            if(/^https?/.test(imgUrl)){
                imgUrl = imgUrl.replace(/^https?/, 'https');
            }else{
                resolve(imgUrl);
                console.warn('请传入https路径');
            }
            window.URL = window.URL || window.webkitURL;
            var xhr = new XMLHttpRequest();
            xhr.open("get", imgUrl+'?'+Math.random(), true);
            xhr.responseType = "blob";
            xhr.onload = function () {
                if (this.status == 200) {
                    var src = window.URL.createObjectURL(this.response);
                    resolve(src);
                }else{
                    reject({src:imgUrl,msg:'Img onLoad Error'});
                }
            };
            xhr.onerror = function(){
                reject({src:imgUrl,msg:'Img onLoad Error'});
            }
            xhr.send();
        })
    }

2.公用方法：

// canvas转图片，图片下载完成后生成base64再画图。arrImg：所需网络图片数组；successCallback：成功的回调，返回所有图片的二进制；errorCallback：错误回调，返回没有下载成功的图片
getImgBase64:function(arrImg,successCallback,errorCallback){
        if(arrImg && arrImg.length > 0){
            for(var i = 0;i < arrImg.length; i++){
                arrImg[i] = this.imgToBase64(arrImg[i]);
            }
            Promise.all(arrImg).then(function (res) {
                successCallback && successCallback(res);
            }).catch(function(err){
                console.log(err);
                errorCallback && errorCallback(err);
            });
        }
}

3.绘制的时候方法：

1.页面js引入html2canvas.min.js-官网cdn

2.绘制代码

// 页面点击绘制canvas方法
        goDraw () {
            //绘制的时候回到页面最上方
            document.documentElement.scrollTop = 0;
            base.getImgBase64( this.arrImg, ( res ) => {
            //这个是需要转base64的图片调用方法
                [
                    this.codeImg,
                    this.headerPic
                ] = res;
                //绘制的区域box
                const gradeBox = document.querySelector( '.grade-box' );
                this.$nextTick( () => {
                    window.html2canvas( gradeBox, {
                        y: gradeBox.offsetTop, // 用于解决上方白屏问题
                        ignoreElements ( item ) { // 忽略不想绘制的元素节点
                            if ( item.classList.contains( 'no-draw' ) ) {
                                return true;
                            }
                            return false;
                        },
                        //允许跨域资源共享，注意不能与 allowTaint 同时配置为 true
                        useCORS: true,
                        // 获取渲染宽度和高度
                        height: gradeBox.getBoundingClientRect().height ,
                        width: gradeBox.offsetWidth,
                    } ).then( ( canvas ) => {
                    //绘制的图片
                      this.html2canvasBase64 = canvas.toDataURL( 'image/jpeg' );
                    } );
                } );
            }, error => {
                console.log('错误提示')；
            } );
        }               

4.canvas画图时候须注意的点：

　　1. 绘制的*canvas*需要让绘制之前的容器高度和绘制时的容器高度保持一致，这样会避免出现白边。

　　　　例如: 涉及到按钮啥的绘制之后不展示，这时就需要给相关*dom*一个高度

　　　　涉及到margin距离，可能不需要*,*就需要注意一下*,*是不是可以设置成*0*

　　2. 有时候客户端会限制canvas绘制图片绘制质量的大小，这个要先确认好