一、寫在前面：
9月24號朋友圈，這一波愛國風，一切換國慶專屬頭像的活動，應該是卷席各位老鐵的朋友圈，作為程式設計師，程式碼源於生活，筆者稍微手一癢，就想了一下原理是很簡單的，於是乎，自己擼一個製作“國慶頭像”的小程式來~，目前只是一個小demo，效果如下圖（UI基本上搬騰訊新聞原版活動介面），很多功能也由於微信API呼叫需要的config配置，未提供實現程式碼，基於 Vue2.6x 構建的專案，原始碼碼可以移步至
二、前情回顧：
9月24號一大早，估計很多人的朋友圈是這樣的：
騰訊新聞官方推出“迎國慶換新顏”活動 ，可領取你的國慶專屬頭像，包括70紀念徽章、小國旗，不過僅僅一天官方就關閉了活動。
接下來我們，就自己擼一個，上車
三、簡析實現原理
其實我們看頁面的話，內容很簡單，就是一個輪播圖切換國慶背景的邊框，然後點選儲存，其實，這裡是涉及Canvas知識點，大概可以分成以下幾步：
- 1、獲取或者上傳微信頭像
- 2、Canvas實現繪圖和頭像合成： Canvas實現定位繪圖，以及兩張圖片的合成
- 3、儲存合成的圖片 將圖片轉換為base64，儲存頭像
四、構建專案
本專案是基於 Vue2.6x 構建的專案
第一步、佈局切圖
這是最基礎的前端技能，就略了，這裡主要就是一個輪播圖的實現，在本專案中，我把這個拆一個輪播元件，目前寫的是沒有過渡動畫特效的（有興趣的同學可以優化一下，加點切換動畫），如下圖
目錄components/slideshow.vue
<template>
<div class="slideshow-warpper">
<div class="img-warpper">
<div class="border-img">
<img :src="borderImgList[nowIndex].src" ref="isBorderImg" />
</div>
<div class="head-img">
<img :src="headImg" ref="isHeadImg" />
</div>
</div>
<div class="btn" @click="goto(prevIndex)"></div>
<div class="btn next" @click="goto(nextIndex)"></div>
</div>
</template>複製程式碼<script>
export default {
name: "slideshow",
props: ["borderImgList", "headImg"],
data() {
return {
nowIndex: 0,
selectBorderImg: this.borderImgList[0].src
};
},
methods: {
goto(index) {
this.nowIndex = index;
this.selectBorderImg = this.borderImgList[index].src;
}
},
computed: {
prevIndex() {
if (this.nowIndex === 0) {
return this.borderImgList.length - 1;
} else {
return this.nowIndex - 1;
}
},
nextIndex() {
if (this.nowIndex === this.borderImgList.length - 1) {
return 0;
} else {
return this.nowIndex + 1;
}
}
}
};
</script>複製程式碼這裡程式碼很平淡，主要就是一個陣列背景邊框為背景，然後迴圈切換。這邊的邏輯比較簡單，
值得一提的是，vue關於src圖片的坑，想必很多人都會遇到，就是正常img里加src="變數"，這樣是不會顯示
舉個例子，父元件傳來的一個圖片的URL，如果你子元件
URL = '/assets/border1.png'複製程式碼<img :src="URL" />複製程式碼這樣是不顯示的
但是你在子元件裡直接，是可以正常載入圖片的
<img :src="/assets/border1.png" />複製程式碼這時候解決辦法，通常就是加個 require(),例如
headImg: require("../assets/test.jpg"),複製程式碼第二步、canvas合成圖片
這裡就是涉及到一些簡單的canvas標籤的運用
1、首先我們要建立一個canvas元素，建立canvas繪圖的環境，設定畫布長寬
2、把利用drawImage方法（詳細的可以移步）兩張照片繪製合成一張照片
3、設定圖片返回的格式，HTMLCanvasElement.toDataURL() 方法
save() {
let slideshowChild = this.$refs.slideshowChild.$refs;
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
canvas.width = 150;
canvas.height = 150;
ctx.drawImage(slideshowChild.isHeadImg, 0, 0, 150, 150);
ctx.drawImage(slideshowChild.isBorderImg, 0, 0, 150, 150);
let urlSrc = canvas.toDataURL("img/png");
this.showCanvas = true;
console.log(urlSrc);
// wx.saveImageToPhotosAlbum({
// filePath: urlSrc
// });
},複製程式碼接下來
我們拿一張圖片做測試ok的。
五、獲取或者上傳頭像
這塊涉及到微信weixin-js-sdk，在專案中安裝它
npm install weixin-js-sdk複製程式碼接下來因為當使用者從微信一進入頁面需要授權獲取使用者資訊，這裡無論是 微信網頁開發，還是小程式開發都涉及到授權，具體而言，網頁授權流程分為四步：
1、引導使用者進入授權頁面同意授權，獲取code
2、通過code換取網頁授權access_token（與基礎支援中的access_token不同）
3、如果需要，開發者可以重新整理網頁授權access_token，避免過期
4、通過網頁授權access_token和openid獲取使用者基本資訊（支援UnionID機制）
這裡就能獲取到微信頭像
當然這就需要你自己在微信公眾平臺申請一個賬號，筆者這裡由於個人公眾號和小程式的開發賬號，都太久沒玩，被凍結了，後面補全這些功能
上傳圖片，儲存這些都有API可以現成的用咯
本專案裡在/api/sdk.js，有部分封裝
五、最後
文章寫到這裡，基本告一段落了，看起來這麼火的活動，背後其實是可以用這麼簡單的程式碼實現的，程式碼源於生活，嘿嘿，是不是很有趣，目前微信sdk相關的部分程式碼未上傳，可以給各位老鐵，自行下載去玩，當然我也會盡快補全。國慶到了，祝各位老鐵，國慶快樂呀~