接口返回base64格式小程序二維碼,以往的做法是需要再調(diào)一個(gè)接口去拿到j(luò)pg/png格式的圖片。如果沒有這個(gè)接口呢,是不是也可以?然而小程序canvas并不支持直接使用base64繪制,好在小程序的文件系統(tǒng)提供了方法,可以把base64經(jīng)過進(jìn)一步處理轉(zhuǎn)成本地圖片。
獲取base64格式圖片
getXcxQrcode() { wx.request({ url: app.globalData.globalUrl + "/get_wx_code", data: { token: app.globalData.weixin_token, scene: app.globalData.page_key, page: "pages/index/index" }, success: (res) => { if (data.data.success) { this.base64src(data.data) } } })}base64格式圖片轉(zhuǎn)換成本地圖片
base64src(base64data) { const filePath = `${wx.env.USER_DATA_PATH}/tmpbase64.png`; const buffer = wx.base64ToArrayBuffer(base64data.buffer); let that = this; fsm.writeFile({ filePath, data: buffer, encoding: 'binary', success() { that.setData({ qrcodeUrl: filePath // 得到http://usr/tmpbase64.png }) }, fail() { reject(new Error('ERROR_BASE64SRC_WRITE')); }, });},使用獲得的本地圖片繪制圓角二維碼
var qrW = 150; //繪制的二維碼寬度var qrH = 150; //繪制的二維碼高度var qr_x = 540; //繪制的二維碼在畫布上的位置var qr_y = 960; //繪制的二維碼在畫布上的位置ctx.save();ctx.beginPath(); //開始繪制//先畫個(gè)圓 前兩個(gè)參數(shù)確定了圓心 (x,y) 坐標(biāo) 第三個(gè)參數(shù)是圓的半徑 四參數(shù)是繪圖方向 默認(rèn)是false,即順時(shí)針ctx.arc(qrW / 2 + qr_x, qrH / 2 + qr_y, qrW / 2, 0, Math.PI * 2, false);ctx.clip(); //畫好了圓 剪切 原始畫布中剪切任意形狀和尺寸。一旦剪切了某個(gè)區(qū)域,則所有之后的繪圖都會(huì)被限制在被剪切的區(qū)域內(nèi) 這也是我們要save上下文的原因ctx.drawImage(this.data.qrcodeUrl, qr_x, qr_y, qrW, qrH);ctx.draw()
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注