技術標籤：uni-appuniapp挖坑uniappcanvasdrawImage

這兩天在做一個前端使用canvas生成海報，好傢伙，一個問題整了快一週

需求是這樣的：後臺給我返回一個背景圖在伺服器上的地址 http://xxx.com/img/1.jpg，還有一個二維碼所在的 x軸 和 y軸，二維碼的內容

前端拿到這些之後

先把背景圖畫在canvas上

然後通過 qrcode 或者別的技術生成二維碼

然後再通過x軸和y軸將二維碼畫在canvas上

//先獲取到canvas   第一個引數是template中寫好的canvas的id
let context = uni.createCanvasContext('canvas', _this)
//引數分別為 背景圖地址  x軸  y軸  寬  高
context.drawImage(background.url, 0, 0, background.w, background.h);
context.save();
//引數分別為 二維碼  x軸  y軸  寬  高
context.drawImage(qrImage, x, y, size, size)
context.save()
context.draw(false,()=>{
    // 這裡執行一些方法,不是重點,不詳細說明
})

// 後來發現背景圖在app端總是畫不出來，二維碼可以
// 經過幾天的苦苦奮戰，終於發現
 

• 由於二維碼是 qrcode 生成的，所以二維碼是 base64 加密的，而背景圖是伺服器的地址，經查詢，發現 drawImage 的第一個引數不能是網路圖片，如果是網路圖片必須先使用 uni.downloadFile 下載下來，這裡我為了統一，使用的 image-tools 的 pathToBase64 將下載的圖片再轉為 base64 去繪製，問題就迎刃而解了

  ---

  用到的API

• qrcode生成二維碼，點此檢視
• uni.downloadFile，點此檢視
• image-tools，點此檢視

如果還有什麼問題，可以加入QQ群我們一起討論

個人部落格：點此進入（http://xueshuai.top）

前端交流群：