現(xiàn)在有一個需求在canvas中要顯示一個從后臺獲取的圖片活尊,并保存到相冊。
因為微信小程序可以有多個canvas琼蚯,這一點和微信小游戲不太相同,微信小游戲一般只有一個canvas惠况,子域除外哈遭庶。
1.canvas繪制
????a.創(chuàng)建一個canvas
? ? ?????var canvas = wx.createCanvasContext("card", this);
? ? b.圖片繪制
? ? ? ? ? canvas.drawImage(imageResource, dx, dy, dWidth, dHeight);
? ? ? ?
方法調(diào)用方式:
drawImage(dx, dy)
drawImage(dx, dy, dWidth, dHeight)
drawImage(sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) 從 1.9.0 起支持
?c.設(shè)置填充樣式
????????canvas.setFillStyle('white');
注:記住一定要在 fillRect等之前調(diào)用,否則不生效
d.設(shè)置陰影樣式
????????CanvasContext.setShadow(number offsetX, number offsetY, number blur, string color)
注:繪制玩想要的效果后稠屠,要是用canvas.setShadow(offsetX, offsetY, blur, '#fff');這樣可以清除該陰影對下面繪制的元素產(chǎn)生影響
e.填充一個矩形
????????CanvasContext.fillRect(number x, number y, number width, number height)
和fillText等功能類似峦睡,所有的樣式一定要在填充前調(diào)用,否則不生效权埠。
其它部分可以參考微信文檔?https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.canvasPutImageData.html
為什么要使用圖片緩存:
使用drawImage所傳的參數(shù)圖片路徑榨了,只可以傳本地路徑或者臨時路徑,不能使用網(wǎng)絡(luò)圖片路徑攘蔽。
所以如果說要使用后臺傳的一個圖片龙屉,需要轉(zhuǎn)換成臨時路徑或者本地路徑。
所以圍繞著這兩點:
a.臨時路徑
微信提供了一個api满俗,可以把網(wǎng)絡(luò)圖片下載保存到本地臨時路徑
注:這里的path雖然是本地路徑转捕,但是其實是微信從后臺下載到本地的臨時路徑,關(guān)閉小程序唆垃,這個路徑及文件不會消失五芝,但是關(guān)閉微信,該資源就會被清除辕万。
所以只能使用第二種方法枢步,把圖片資源下載到本地沉删。
下載前,首先要判斷下該文件在本地是否存在
微信小程序提供了方法access和downloadFile方法
這里的path和filePath都是目標(biāo)路徑醉途。
這里先定義一個目標(biāo)路徑:
let qrPath = `${wx.env.USER_DATA_PATH}/qr_share.png`;
把這個路徑當(dāng)成目標(biāo)路徑傳入方法中矾瑰,圖片就會下載保存到該路徑上。
保存到本地的圖片脯倚,只要小程序不刪除,該文件就不會清空