微信小程式繪製網路圖片的問題
阿新 • • 發佈:2019-02-15
一、問題描述
我的繪圖過程是這樣的:1.建立畫布;2.繪製一些內容,繪製到網路路徑的圖片,繪製接下來的內容;3.draw出圖片,canvasToTempFilePath生成圖片。開發者工具一切順利,手機上顯示不出網路路徑畫的圖片。
二、解決辦法
查看了多篇文章之後發現,網路圖片下到本地是需要時間的!所以,在畫到網路圖片的時候再下載圖片可能來不及了,具體解決方法有兩種,原理是一樣的。
1.在建立canvas之前就下載圖片,成功之後再開始畫canvas,舉個栗子:
// 下載網路路徑的圖片到本地再開始繪製canvas let image = '網路路徑' wx.getImageInfo({ // 或者用wx.downloadFile src: image, success: res => { let tempPath = res.path // 開始繪製canvas this.createCanvesFile(tempPath) } })
2.網路圖片之後要繪製的內容都放在轉為本地路徑之後,舉個栗子:
const ctx = wx.createCanvasContext('shareCanvas') // 圖片白底 ctx.fillStyle = '#fff' ctx.fillRect(0, 0, 850, 1450) ctx.save() // 繪製網路路徑圖片 let wantImage = '網路路徑' wx.getImageInfo({ src: wantImage, success: res => { let tempPath = res.path // 繪製接下來的內容 // 比如二維碼和提示文字 ctx.fillStyle = '#fff' ctx.fillRect(0, 1200, 850, 1450) ctx.restore() ctx.save() let qrcodePath = '/static/write/qrcode.png' ctx.drawImage(qrcodePath, 50, 1220, 200, 200) ctx.textAlign = 'right' ctx.setFontSize(30) ctx.fillStyle = '#999999' ctx.fillText('長按識別圖中二維碼', 800, 1250) ctx.fillText('參與挑戰', 800, 1300) ctx.restore() ctx.save() ctx.draw(false, () => { // 生成圖片 wx.canvasToTempFilePath({ canvasId: 'shareCanvas', success: res => { this.shareImg = res.tempFilePath } }) }) } })
總結:重點應該是把draw方法畫在success裡。
第二次發文章,如有雷同純屬巧合,如有錯誤請指出,原創文章如需轉載請標明出處。筆芯筆芯❤️