canvas生成帶二維碼的海報踩坑

canvas海報內容有背景圖，圓形頭像，用戶暱稱，連接的二維碼圖片。

問題以下

圖片不顯示

• 繪製渲染的時候圖像不顯示：是由於圖片異步加載，因此canvas的操做須要放在onload事件中，不然圖片會不顯示，由於圖片不止一張，建議放在promise中，用async，await調用
• canvas最終生成圖片分享出去，生成的圖片不顯示：是由於圖像跨域問題，設置img的attr，‘crossOrigin'爲'Anonymous'就行了，可是要注意，若是不當心爲base64也設置了這個參數，在低版本的安卓（我出現問題是在華爲安卓4.4.2中）base64就不會顯示。

圖像模糊

一開始對安卓機型統一作了dpr=1的處理，結果安卓機上圖片很是的模糊，圓角頭像鋸齒嚴重，網上的解決方法無一成功，後來仍是將dpr設爲window.devicePixelRatio就行了，只是圖片的寬高最好設置爲固定值，根據flexble自適應

部分代碼示例

// 頭像;
const imgAvadar = await promiseLoadImg(this.userInfoExternal.headUrl);
const imgSize = 40 * this.dpr;
const imgPos = 24 * this.dpr;

ctx.arc((this.canvas.width / 2), (imgPos + (imgSize / 2)), (imgSize / 2), 0, 2 * Math.PI);
ctx.clip();
ctx.drawImage(imgAvadar, ((this.canvas.width / 2) - (imgSize / 2)), imgPos, imgSize, imgSize);

new Promise(resolve => {
    const img = new Image();
    // base64添加了如下跨域配置，在低版本安卓中會不顯示圖片
    if (src.indexOf('base64,') === -1) {
        img.setAttribute('crossOrigin', 'Anonymous');
    }
    img.onload = function () {
        resolve(img);
    };
    img.src = src;
});