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繪製圖片繪製質量的大小，這個要先確認好