微信小程序--圖片本地緩存與canvas繪制

現(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)路徑傳入方法中矾瑰,圖片就會下載保存到該路徑上。


通過access判斷文件是否存在结蟋,不存在就直接下載

保存到本地的圖片脯倚,只要小程序不刪除,該文件就不會清空

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末嵌屎,一起剝皮案震驚了整個濱河市推正,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌宝惰,老刑警劉巖植榕,帶你破解...
    沈念sama閱讀 221,576評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異尼夺,居然都是意外死亡尊残,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,515評論 3 399
  • 文/潘曉璐 我一進店門淤堵,熙熙樓的掌柜王于貴愁眉苦臉地迎上來寝衫,“玉大人,你說我怎么就攤上這事拐邪∥恳悖” “怎么了?”我有些...
    開封第一講書人閱讀 168,017評論 0 360
  • 文/不壞的土叔 我叫張陵扎阶,是天一觀的道長汹胃。 經(jīng)常有香客問我,道長东臀,這世上最難降的妖魔是什么着饥? 我笑而不...
    開封第一講書人閱讀 59,626評論 1 296
  • 正文 為了忘掉前任,我火速辦了婚禮惰赋,結(jié)果婚禮上宰掉,老公的妹妹穿的比我還像新娘。我一直安慰自己赁濒,他們只是感情好贵扰,可當(dāng)我...
    茶點故事閱讀 68,625評論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著流部,像睡著了一般戚绕。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上枝冀,一...
    開封第一講書人閱讀 52,255評論 1 308
  • 那天舞丛,我揣著相機與錄音耘子,去河邊找鬼。 笑死球切,一個胖子當(dāng)著我的面吹牛谷誓,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播吨凑,決...
    沈念sama閱讀 40,825評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼捍歪,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了鸵钝?” 一聲冷哼從身側(cè)響起糙臼,我...
    開封第一講書人閱讀 39,729評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎恩商,沒想到半個月后变逃,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,271評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡怠堪,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,363評論 3 340
  • 正文 我和宋清朗相戀三年揽乱,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片粟矿。...
    茶點故事閱讀 40,498評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡凰棉,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出陌粹,到底是詐尸還是另有隱情撒犀,我是刑警寧澤,帶...
    沈念sama閱讀 36,183評論 5 350
  • 正文 年R本政府宣布申屹,位于F島的核電站绘证,受9級特大地震影響隧膏,放射性物質(zhì)發(fā)生泄漏哗讥。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,867評論 3 333
  • 文/蒙蒙 一胞枕、第九天 我趴在偏房一處隱蔽的房頂上張望杆煞。 院中可真熱鬧,春花似錦腐泻、人聲如沸决乎。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,338評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽构诚。三九已至,卻和暖如春铆惑,著一層夾襖步出監(jiān)牢的瞬間范嘱,已是汗流浹背送膳。 一陣腳步聲響...
    開封第一講書人閱讀 33,458評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留丑蛤,地道東北人叠聋。 一個月前我還...
    沈念sama閱讀 48,906評論 3 376
  • 正文 我出身青樓,卻偏偏與公主長得像受裹,于是被迫代替她去往敵國和親碌补。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,507評論 2 359

推薦閱讀更多精彩內(nèi)容