canvas海報內(nèi)容有背景圖，圓形頭像，用戶昵稱，鏈接的二維碼圖片。
問題如下
圖片不顯示
- 繪制渲染的時候圖像不顯示：是因為圖片異步加載，所以canvas的操作需要放在onload事件中，否則圖片會不顯示，因為圖片不止一張，建議放在promise中，用async，await調(diào)用
- canvas最終生成圖片分享出去，生成的圖片不顯示：是因為圖像跨域問題，設置img的attr，‘crossOrigin'為'Anonymous'就好了，但是要注意，如果不小心為base64也設置了這個參數(shù)，在低版本的安卓（我出現(xiàn)問題是在華為安卓4.4.2中）base64就不會顯示。
圖像模糊
一開始對安卓機型統(tǒng)一做了dpr=1的處理，結果安卓機上圖片非常的模糊，圓角頭像鋸齒嚴重，網(wǎng)上的解決方法無一成功，后來還是將dpr設為window.devicePixelRatio就好了，只是圖片的寬高最好設置為固定值，根據(jù)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;
});
總結
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對腳本之家的支持。
