怎么在微信小程序中使用canvas繪制一個圓角base64圖片-創(chuàng)新互聯(lián)
今天就跟大家聊聊有關(guān)怎么在微信小程序中使用canvas繪制一個圓角base64圖片，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。
獲取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 // 得到https://cache.yisu.com/upload/information/20200622/114/16411.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(); //開始繪制 //先畫個圓 前兩個參數(shù)確定了圓心 （x,y） 坐標 第三個參數(shù)是圓的半徑 四參數(shù)是繪圖方向 默認是false，即順時針 ctx.arc(qrW / 2 + qr_x, qrH / 2 + qr_y, qrW / 2, 0, Math.PI * 2, false); ctx.clip(); //畫好了圓 剪切 原始畫布中剪切任意形狀和尺寸。一旦剪切了某個區(qū)域，則所有之后的繪圖都會被限制在被剪切的區(qū)域內(nèi) 這也是我們要save上下文的原因 ctx.drawImage(this.data.qrcodeUrl, qr_x, qr_y, qrW, qrH); ctx.draw()
看完上述內(nèi)容，你們對怎么在微信小程序中使用canvas繪制一個圓角base64圖片有進一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道，感謝大家的支持。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
網(wǎng)站題目：怎么在微信小程序中使用canvas繪制一個圓角base64圖片-創(chuàng)新互聯(lián)
文章分享：http://m.jiaotiyi.com/article/dgsicp.html