canvas海報內容有背景圖，圓形頭像，用戶昵稱，鏈接的二維碼圖片。
問題如下
圖片不顯示
圖像模糊
一開始對安卓機型統一做了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;});總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對武林網的支持。
新聞熱點
疑難解答
