前言
由于小程序的限制，我們不能很方便地在微信內(nèi)直接分享小程序到朋友圈，所以普遍的做法是生成一張帶有小程序分享碼的分享海報，再將海報保存到手機相冊，有兩種方法可以生成分享海報，第一種是讓后臺生成然后返回圖片鏈接，這一種方法比較簡單，只需要傳后臺所需要的參數(shù)就行了，今天給大家介紹的是第二種方法，用canvas生成分享海報。
效果
image
主要步驟
- 把海報樣式用標簽先寫好，方便畫圖時可以比對
- 用canvas進行畫圖，canvas要注意定好寬高
- canvas利用wx.canvasToTempFilePath這個api將canvas轉(zhuǎn)化為圖片
- 將轉(zhuǎn)化好的圖片鏈接放入image標簽里
- 再利用wx.saveImageToPhotosAlbum保存圖片
坑點
- 用canvas進行畫圖的時候要注意畫出來的圖的大小一定要是你用標簽寫好那個樣式的兩倍大小，比如你的海報大小是400600的大小，那你用canvas畫的時候大小就要是8001200，寬高可以寫在樣式里，如果你畫出來的圖跟你海報圖是一樣的大小的話生成的圖片是會很模糊的，所以才需要放大兩倍。
- 畫圖的時候要注意尺寸的轉(zhuǎn)化，如果你是用rpx做單位的話，就要對單位進行轉(zhuǎn)化，因為canvas提供的方法都是經(jīng)px為單位的，所以這一點要注意一下，px轉(zhuǎn)rpx的公式是w/750z2，w是手機屏幕寬度screenWidth，可以通過wx.getSystemInfo獲取，z是你需要畫圖的單位，2就是乘以兩倍大小。
- 圖片來源問題，因為canvas不支持網(wǎng)絡圖片畫圖，所以你的圖片要么是固定的，如果不是固定的，那就要用wx.downloadFile下載后得到一個臨時路徑才行
- 小程序碼問題，小程序需要后臺請求接口后返回一個二進制的圖片，因為二進制圖片canvas也是不支持的，所以也是要用wx.downloadFile下載后得到一個臨時路徑，或者可以叫后臺直接返回一個小程序碼的路徑給你
- 這里保存的時候是有個授權(quán)提醒的，如果拒絕的話再次點擊就沒有反應了，所以這里我做了一個判斷是否有授權(quán)的，如果沒有就彈窗提醒，確認的話會打開設置頁面，確認授權(quán)后再次返回就行了，這里有個坑注意下，就是之前拒絕后再進入設置頁面確認授權(quán)返回頁面時保存圖片會不成功，官方還沒解決，我是加了個setTimeOut處理的，詳情可以看這里 https://developers.weixin.qq.com/community/develop/doc/000c46600780f0fa68d7eac345a400
代碼實現(xiàn)
image
這里圖片我先用的是網(wǎng)上的鏈接，實際項目中是后臺返回的數(shù)據(jù)，這個可以自行處理，這里只是為了演示方便，生成臨時路徑的方法我這里是分別定義了一個方法，其實可以合成一個方法的，只是生成小程序碼時如果要傳入?yún)?shù)要注意一下。
繪圖方法是drawImg，這里截一部分，詳細的可以看代碼片段
image
不足
由于在實際項目中返回的圖片寬高是不固定的，但是canvas畫出來的又需要固定寬高，所以分享圖會有圖片變形的問題，使用drawImage里的參數(shù)也不能解決，如果各位有比較好的方案可以一起討論一下。
