如何避免使用canvas生成帶二維碼海報(bào)踩坑

這篇文章主要介紹了如何避免使用canvas生成帶二維碼海報(bào)踩坑的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇如何避免使用canvas生成帶二維碼海報(bào)踩坑文章都會(huì)有所收獲，下面我們一起來看看吧。

問題如下

圖片不顯示

• 繪制渲染的時(shí)候圖像不顯示：是因?yàn)閳D片異步加載，所以canvas的操作需要放在onload事件中，否則圖片會(huì)不顯示，因?yàn)閳D片不止一張，建議放在promise中，用async，await調(diào)用

• canvas最終生成圖片分享出去，生成的圖片不顯示：是因?yàn)閳D像跨域問題，設(shè)置img的attr，‘crossOrigin'為'Anonymous'就好了，但是要注意，如果不小心為base64也設(shè)置了這個(gè)參數(shù)，在低版本的安卓（我出現(xiàn)問題是在華為安卓4.4.2中）base64就不會(huì)顯示。

圖像模糊

一開始對(duì)安卓機(jī)型統(tǒng)一做了dpr=1的處理，結(jié)果安卓機(jī)上圖片非常的模糊，圓角頭像鋸齒嚴(yán)重，網(wǎng)上的解決方法無一成功，后來還是將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;
});

關(guān)于“如何避免使用canvas生成帶二維碼海報(bào)踩坑”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“如何避免使用canvas生成帶二維碼海報(bào)踩坑”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。