最近朋友圈里經(jīng)常有看到這樣的頭像

既然這么火，大家要圖又這么難，作為程序員的自己當(dāng)然要自己動(dòng)手實(shí)現(xiàn)一個(gè)。

老規(guī)矩，先看效果圖

仔細(xì)研究了下，發(fā)現(xiàn)實(shí)現(xiàn)起來并不難，核心代碼只有下面10行。

???????wx.canvasToTempFilePath({
??????????x:?0,
??????????y:?0,
??????????width:?num,
??????????height:?num,
??????????destWidth:?num,
??????????destHeight:?num,
??????????canvasId:?'shareImg',
??????????success:?function(res)?{
????????????that.setData({
??????????????prurl:?res.tempFilePath
????????????})
????????????wx.hideLoading()
??????????},
??????????fail:?function(res)?{
????????????wx.hideLoading()
??????????}
???????})


一，首先要?jiǎng)?chuàng)建一個(gè)小程序

至于如何創(chuàng)建小程序，我這里就不在細(xì)講了，我也有寫過創(chuàng)建小程序的文章，也有路過相關(guān)的學(xué)習(xí)視頻，去翻下我歷史文章找找就行。

二，創(chuàng)建好小程序后，我們就開始來布局

布局很簡單，只有下面幾行代碼。

<!--?畫布大小按需定制?這里我按照背景圖的尺寸定的??-->
<canvas?canvas-id="shareImg"></canvas>
<!--?預(yù)覽區(qū)域??-->
<view?class='preview'>
??<image?src='{{prurl}}'?mode='aspectFit'></image>
??<button?size='mini'?open-type="getUserInfo"?bindgetuserinfo="shengcheng"?data-k="1">生成頭像1</button>
??<button?size='mini'?open-type="getUserInfo"?bindgetuserinfo="shengcheng"?data-k="2">生成頭像2</button>
??<button?size='mini'?open-type="getUserInfo"?bindgetuserinfo="shengcheng"?data-k="3">生成頭像3</button>
??<button?size='mini'?open-type="getUserInfo"?bindgetuserinfo="shengcheng"?data-k="4">生成頭像4</button>
??<button?type='primary'?bindtap='save'>保存分享圖</button>
</view>


實(shí)現(xiàn)效果圖如下

三，使用canvas來畫圖

其實(shí)我們實(shí)現(xiàn)微信頭像掛紅旗，原理很簡單，就是把頭像放在下面，然后把有紅旗的相框蓋在頭像上面

下面就直接把核心代碼貼給大家

let?promise1?=?new?Promise(function(resolve,?reject)?{
??????wx.getImageInfo({
????????src:?"../../images/xiaoshitou.jpg",
????????success:?function(res)?{
??????????console.log("promise1",?res)
??????????resolve(res);
????????}
??????})
????});
????let?promise2?=?new?Promise(function(resolve,?reject)?{
??????wx.getImageInfo({
????????src:?`../../images/head${index}.png`,
????????success:?function(res)?{
??????????console.log(res)
??????????resolve(res);
????????}
??????})
????});
????Promise.all([
??????promise1,?promise2
????]).then(res?=>?{
??????console.log("Promise.all",?res)
??????//主要就是計(jì)算好各個(gè)圖文的位置
??????let?num?=?1125;
??????ctx.drawImage('../../'+res[0].path,?0,?0,?num,?num)
??????ctx.drawImage('../../'?+?res[1].path,?0,?0,?num,?num)
??????ctx.stroke()
??????ctx.draw(false,?()?=>?{
????????wx.canvasToTempFilePath({
??????????x:?0,
??????????y:?0,
??????????width:?num,
??????????height:?num,
??????????destWidth:?num,
??????????destHeight:?num,
??????????canvasId:?'shareImg',
??????????success:?function(res)?{
????????????that.setData({
??????????????prurl:?res.tempFilePath
????????????})
????????????wx.hideLoading()
??????????},
??????????fail:?function(res)?{
????????????wx.hideLoading()
??????????}
????????})
??????})
????})


來看下畫出來的效果圖

四，頭像加紅旗畫好以后，我們就要想辦法把圖片保存到本地了

保存圖片的代碼也很簡單。

save:?function()?{
????var?that?=?this
????wx.saveImageToPhotosAlbum({
??????filePath:?that.data.prurl,
??????success(res)?{
????????wx.showModal({
??????????content:?'圖片已保存到相冊，趕緊曬一下吧~',
??????????showCancel:?false,
??????????confirmText:?'好噠',
??????????confirmColor:?'#72B9C3',
??????????success:?function(res)?{
????????????if?(res.confirm)?{
??????????????console.log('用戶點(diǎn)擊確定');
????????????}
??????????}
????????})
??????}
????})
??}


來看下保存后的效果圖

到這里，我的微信頭像就成功的加上了小紅旗了。

源碼我也已經(jīng)給大家準(zhǔn)備好了，有需要的同學(xué)在文末留言即可。

后面我準(zhǔn)備錄制一門課程出來，來詳細(xì)教大家實(shí)現(xiàn)這個(gè)功能，敬請關(guān)注。