版權(quán)聲明：本文原創(chuàng)枫振，轉(zhuǎn)載請注明出處 http://www.reibang.com/p/01f526a4f948
小程序的入口主要集中了以下3個：
- 二維碼
- 搜索欄
- 聊天轉(zhuǎn)發(fā)
然而并沒有流量大戶——朋友圈；雖然小程序不能分享到朋友圈，但其并沒有把長按識別二維碼的功能閹割聋呢；于是乎在朋友圈瘋狂轉(zhuǎn)發(fā)的便成了一張帶小程序碼的圖片填硕；
這個功能的實現(xiàn)，在我第一次寫小程序的時候困擾了很久峻仇；最開始想的重點都在帶參數(shù)的小程序碼上俄讹，查資料的時候偏離了軌道哆致，一番搜索之后無疾而終，遂把這鍋扔給了服務(wù)端患膛，但仍耿耿于懷摊阀；第二次又是一番搜索，理清了頭緒踪蹬，就是canvas畫一張圖的事兒胞此，但canvas我很少寫，帶著恐懼便沒多嘗試跃捣，一半demo被擱置豌鹤；N天之后，又想起這事枝缔，豁然開朗：)
思路分解
源碼見文章底部
1. 二維碼如果帶有參數(shù) 就有服務(wù)端發(fā)送過來 我們需要的只是圖片的url；
2. 把用到的圖片和文字繪制到畫布上 wx.createCanvasContext()蚊惯；
3. 用戶點擊生成分享圖的時候愿卸。把畫布轉(zhuǎn)成圖片wx.canvasToTempFilePath()一直到這里，以上操作對用戶都是不可見的,此時生成圖片后API會返回圖片的路徑url截型，這時可以把拿到的圖片url放到一個<image>里展示給用戶了趴荸；
4. 再來一個按鈕把展示的圖片調(diào)用wx.saveImageToPhotosAlbum()保存到相冊中，完結(jié)撒花宦焦；
真的只是canvas畫張圖的事兒胺⒍邸！２帧酝豪！為什么之前腦子像堵塞一般？現(xiàn)在切入正題精堕，一步一步實現(xiàn)生成分享圖并保存到相冊的功能孵淘；
1. 準(zhǔn)備工作
當(dāng)然是準(zhǔn)備一張畫布了 o(￣︶￣)o 順便把頁面結(jié)構(gòu)一起畫一下···
<!-- canvas.wxml -->
<!-- 畫布大小按需定制 這里我按照背景圖的尺寸定的 -->
<canvas canvas-id="shareImg" style="width:545px;height:771px"></canvas>
<!-- 生成分享圖 這里的操作是把canvas繪制的圖預(yù)覽出來 -->
<button class='share' type='primary' bindtap='share'>生成分享圖</button>
<!-- 預(yù)覽分享圖 這里就是上圖展示的效果 -->
<!-- 剛開始是隱藏的 生成分享圖之后顯示, 用一個布爾變量來控制 這里的樣式大家看圖就寫出來了 -->
<view hidden='{{hidden}}' class='preview'>
<image src='{{prurl}}' mode='widthFix'></image>
<button type='primary' size='mini' bindtap='save'>保存分享圖</button>
</view>
/* pages/canvas/canvas.wxss */
canvas{
position: fixed;
top: 0;
left: 999px;
}
/* 畫布繪制過程不能隱藏 但是又不能被用戶看見 所以定位在用戶看不到地方 */
2. 繪制畫布內(nèi)容
以圖中為例，畫布分為三部分： 背景圖 歹篓、二維碼圖瘫证、描述文字揉阎；
繪圖和文字的方法 看小程序開發(fā)文檔即可 寫的很清楚；
這里注意繪制圖片到畫布之前 要先調(diào)用wx.getImageInfo()獲取圖片信息背捌；
廢話不多說毙籽，直接上代碼；
/* promise可以忽略 是用來改善異步回調(diào)執(zhí)行順序 與本功能沒有大的關(guān)系 */
let promise1 = new Promise(function (resolve, reject) {
/* 獲得要在畫布上繪制的圖片 */
wx.getImageInfo({
src: '../../public/pics/qrcode.jpg',
success: function (res) {
console.log(res)
resolve(res);
}
})
});
let promise2 = new Promise(function (resolve, reject) {
wx.getImageInfo({
src: '../../public/pics/qrbg.png',
success: function (res) {
console.log(res)
resolve(res);
}
})
});
/* 圖片獲取成功才執(zhí)行后續(xù)代碼 */
Promise.all(
[promise1,promise2]
).then(res => {
console.log(res)
/* 創(chuàng)建 canvas 畫布 */
const ctx = wx.createCanvasContext('shareImg')
/* 繪制圖像到畫布 圖片的位置你自己計算好就行 參數(shù)的含義看文檔 */
/* ps: 網(wǎng)絡(luò)圖片的話 就不用加../../路徑了 反正我這里路徑得加 */
ctx.drawImage('../../' + res[0].path, 158, 190, 210, 210)
ctx.drawImage('../../'+res[1].path, 0, 0, 545, 771)
/* 繪制文字 位置自己計算 參數(shù)自己看文檔 */
ctx.setTextAlign('center') // 位置
ctx.setFillStyle('#ffffff') // 顏色
ctx.setFontSize(22) // 字號
ctx.fillText('分享文字描述', 545 / 2, 130) // 內(nèi)容 不會自己換行 需手動換行
ctx.fillText('分享文字描述', 545 / 2, 160) // 內(nèi)容
/* 繪制 */
ctx.stroke()
ctx.draw()
})
3. 畫布生成圖片
點擊生成分享圖時候觸發(fā)該事件毡庆；
直接調(diào)用APIwx.canvasToTempFilePath()即可坑赡；
附上鏈接wx.canvasToTempFilePath() ;
var that =this
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 545,
height: 771,
destWidth: 545,
destHeight: 771,
canvasId: 'shareImg',
success: function (res) {
console.log(res.tempFilePath);
/* 這里 就可以顯示之前寫的 預(yù)覽區(qū)域了 把生成的圖片url給image的src */
that.setData({
prurl: res.tempFilePath,
hidden:false
})
},
fail: function (res) {
console.log(res)
}
})
4. 保存圖片到相冊
保存圖片到相冊，這里記得要獲取授權(quán)(＾Ｕ＾)ノ~ＹＯ
直接調(diào)用APIwx.canvasToTempFilePath()即可扭仁；
附上鏈接wx.saveImageToPhotosAlbum() ;
var that =this
wx.saveImageToPhotosAlbum({
filePath: that.data.prurl,
success(res) {
wx.showModal({
content: '圖片已保存到相冊垮衷，趕緊曬一下吧~',
showCancel: false,
confirmText: '好的',
confirmColor: '#333',
success: function (res) {
if (res.confirm) {
console.log('用戶點擊確定');
/* 該隱藏的隱藏 */
that.setData({
hidden:true
})
}
}
})
}
})
^ _ ^ 完結(jié)撒花，是不是非常簡單
以上代碼僅供參考乖坠，剩下的全靠freestyle了搀突，有任何問題可與我留言；如果有幫到您熊泵，請別吝嗇您的star和喜歡~
demo：canvasShareImg
P·S 一個重要問題：圓角頭像以及帶用戶頭像的小程序碼以下代碼放在繪制canvas的最后步驟仰迁。頭像調(diào)好大小位置覆蓋在二維碼中間位置就好了。
ctx.save() //這句很重要 保存之前的繪制
var r = 105
var cx = 158 + r
var cy = 190 + r
ctx.arc(cx, cy, r, 0, 2 * Math.PI)
ctx.clip()
ctx.drawImage("圖片path", 158, 190, 210, 210)
ctx.restore()
ctx.draw()
系列文章一：微信小程序自定義組件——模態(tài)框 Modal
系列文章二：微信小程序自定義組件——底部菜單欄 ActionSheet
最近寫了個小程序顽分，歡迎大家試用給我提提意見~
