這段時間在做一個分享的頁面，其中有一個步驟就是

1.需要將服務端的幾張圖片合成一張圖片；

2.幾種圖片中包含了二維碼資訊；

3.二維碼的資訊展示在右下角。

合成圖片的過程就是呼叫了canvas的API，程式碼如下：

_buildImages(config, callback) {
            CanvasRenderingContext2D.prototype.roundRect = function (x, y, w, h, r) {
                var min_size = Math.min(w, h);
                if (r > min_size / 2) r = min_size / 2;
                // 開始繪製
                this.beginPath();
                this.moveTo(x + r, y);
                this.arcTo(x + w, y, x + w, y + h, r);
                this.arcTo(x + w, y + h, x, y + h, r);
                this.arcTo(x, y + h, x, y, r);
                this.arcTo(x, y, x + w, y, r);
                this.stroke();
                this.closePath();
                return this;
            }


            // 使用canvas
            let myCanvas = document.createElement("canvas");
            myCanvas.style.backgroundColor = 'transparent';
            myCanvas.width = config.width;
            myCanvas.height = config.height;


            let context = myCanvas.getContext("2d");


            context.save();
            // 圖片的image物件放回原來的陣列中。
            let items = config.items;
            for (let i = 0; i < items.length; i++) {
                let item = items[i];


                let img = new Image();
                img.crossOrigin = "anonymous";
                img.src = item.src; 
                item.imageObj = img;


            }


            // 定時判斷圖片是否載入完成
            let window_setThree = window.setInterval(function() {
                //圖片是否全部加在完成的標誌
                let allReady = true;


                //判斷圖片是否全部加在完成
                for (let i = 0; i < items.length; i++) {
                    let image = items[i].imageObj;
                    allReady = allReady && image.complete
                }


                // 拼接圖片，輸出dataUrl     
                if (allReady) {
                    clearInterval(window.clearInterval(window_setThree));


                    for (let i = 0; i < items.length; i++) {
                        let item = items[i];
                        //處理服務端傳過來沒有頭像的問題
                        if(!config.items[i].src){
                            continue;
                        }


                        if(i == 1){


                            context.save();


                           var pattern = context.createPattern(item.imageObj, "no-repeat");
                            context.roundRect(item.xpw * config.width, item.yph * config.height, item.wpw * config.width, item.hph * config.height, item.hph * config.height/2);
                            context.fillStyle = pattern;
                            context.fill();
                            context.clip();
                            context.drawImage(item.imageObj, item.xpw * config.width, item.yph * config.height, item.wpw * config.width, item.hph * config.height); 
                            context.restore(); // 還原狀態
                        }else{
                            context.drawImage(item.imageObj, item.xpw * config.width, item.yph * config.height, item.wpw * config.width, item.hph * config.height);
                        }
                       
                    }


                    context.save();


                    let canvasSrc = myCanvas.toDataURL("image/png");


                    if (callback && callback instanceof Function) {
                        callback(canvasSrc)
                    }
                }
            }, 50);
        }

這一切都挺順利得完成了，iOS基本上都可以識別上面的二維碼資訊，並且跳轉到對應的公眾號去，但是安卓卻時好時不好，讓人傷腦筋。

經過一個下午的除錯，排除不可能的因素，一開始以為是二維碼的位置關係，的確調整了位置，可以被掃出，但是跳轉的連結不知道為何不正確，難倒是微信處理了？（此處有一個疑問）

於是，除錯了另一種方案，直接放二維碼連結，不經過canvas，很和諧得跳轉到了我們想要其跳轉的位置，排除了連結返回有問題的可能。

接下來，嘗試得把canvas最後轉為base64圖片的格式修改為jpeg後，才發現，安卓機神奇得都可以跳轉了。（這是經過一番周折的嘗試結果，具體為何還沒有結論）

以上內容，希望對遇到相同問題的同學給到幫助！