今天小編分享一下有關(guān)于:“怎么避免使用canvas生成帶二維碼海報(bào)踩坑?”這個(gè)問(wèn)題的解決方法總結(jié),希望大家可以少走彎路,希望可以幫助到大家!
問(wèn)題如下
圖片不顯示
- 繪制渲染的時(shí)候圖像不顯示:是因?yàn)閳D片異步加載,所以canvas的操作需要放在onload事件中,否則圖片會(huì)不顯示,因?yàn)閳D片不止一張,建議放在promise中,用async,await調(diào)用
- canvas最終生成圖片分享出去,生成的圖片不顯示:是因?yàn)閳D像跨域問(wèn)題,設(shè)置img的attr,‘crossOrigin'為'Anonymous'就好了,但是要注意,如果不小心為base64也設(shè)置了這個(gè)參數(shù),在低版本的安卓(我出現(xiàn)問(wèn)題是在華為安卓4.4.2中)base64就不會(huì)顯示。
圖像模糊
一開始對(duì)安卓機(jī)型統(tǒng)一做了dpr=1的處理,結(jié)果安卓機(jī)上圖片非常的模糊,圓角頭像鋸齒嚴(yán)重,網(wǎng)上的解決方法無(wú)一成功,后來(lái)還是將dpr設(shè)為window.devicePixelRatio就好了,只是圖片的寬高最好設(shè)置為固定值,根據(jù)flexble自適應(yīng)
部分代碼示例
// 頭像;
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添加了以下跨域配置,在低版本安卓中會(huì)不顯示圖片
if (src.indexOf('base64,') === -1) {
img.setAttribute('crossOrigin', 'Anonymous');
}
img.onload = function () {
resolve(img);
};
img.src = src;
});
總結(jié)
那么以上的代碼和內(nèi)容呢!就是和“怎么避免使用canvas生成帶二維碼海報(bào)踩坑?”這個(gè)問(wèn)題的相關(guān)內(nèi)容分享!小編也希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,更多的知識(shí)內(nèi)容都可以在W3Cschool中得到學(xué)習(xí)!。