婷婷综合国产,91蜜桃婷婷狠狠久久综合9色 ,九九九九九精品,国产综合av

主頁 > 知識庫 > canvas生成帶二維碼海報的踩坑記錄

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

熱門標簽:惡搞電話機器人 欣鼎電銷機器人 效果 地圖標注軟件打印出來 ok電銷機器人 黃石ai電銷機器人呼叫中心 如何查看地圖標注 智能電銷機器人被禁用了么 高德地圖標注商戶怎么標 電話機器人技術

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;
});

總結

以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作具有一定的參考學習價值,謝謝大家對腳本之家的支持。

標簽:盤錦 聊城 中山 赤峰 萍鄉 金昌 阿壩 綏化

巨人網絡通訊聲明:本文標題《canvas生成帶二維碼海報的踩坑記錄》,本文關鍵詞  canvas,生成,帶,二維,碼海,;如發現本文內容存在版權問題,煩請提供相關信息告之我們,我們將及時溝通與處理。本站內容系統采集于網絡,涉及言論、版權與本站無關。
  • 相關文章
  • 下面列出與本文章《canvas生成帶二維碼海報的踩坑記錄》相關的同類信息!
  • 本頁收集關于canvas生成帶二維碼海報的踩坑記錄的相關信息資訊供網民參考!
  • 推薦文章
    主站蜘蛛池模板: 离岛区| 新蔡县| 图木舒克市| 南涧| 大英县| 虎林市| 武定县| 房产| 天津市| 龙游县| 孝义市| 定远县| 天峻县| 汉寿县| 封丘县| 抚宁县| 潮安县| 嵩明县| 安泽县| 内黄县| 南川市| 桐城市| 中牟县| 双城市| 广宗县| 南陵县| 五寨县| 寻甸| 阿勒泰市| 海门市| 福建省| 临澧县| 日照市| 鄂伦春自治旗| 崇文区| 加查县| 沐川县| 宜州市| 乌鲁木齐县| 达拉特旗| 宜春市|