開發微信一鍵製做「國慶頭像」小工具，比你@微信官方靠譜多了【基於 Vue2.6x 構建】

時間 2019-11-06

標籤開發微信一鍵製做國慶頭像工具官方靠譜多了基於 Vue2.6x 構建欄目悠閒生活简体版

原文原文鏈接

1、寫在前面：

9月24號朋友圈，這一波愛國風，一切換國慶專屬頭像的活動，應該是卷席各位老鐵的朋友圈，做爲程序員，代碼源於生活，筆者稍微手一癢，就想了一下原理是很簡單的，因而乎，本身擼一個製做「國慶頭像」的小程序來~，目前只是一個小demo，效果以下圖（UI基本上搬騰訊新聞原版活動界面），不少功能也因爲微信API調用須要的config配置，未提供實現代碼，基於 Vue2.6x 構建的項目，源碼碼能夠移步至前端

2、前情回顧：

9月24號一大早，估計不少人的朋友圈是這樣的：vue

騰訊新聞官方推出「迎國慶換新顏」活動，可領取你的國慶專屬頭像，包括70記念徽章、小國旗，不過僅僅一天官方就關閉了活動。git

接下來咱們，就本身擼一個，上車程序員

3、簡析實現原理

其實咱們看頁面的話，內容很簡單，就是一個輪播圖切換國慶背景的邊框，而後點擊保存，其實，這裏是涉及Canvas知識點，大概能夠分紅如下幾步：github

一、獲取或者上傳微信頭像
二、Canvas實現繪圖和頭像合成： Canvas實現定位繪圖，以及兩張圖片的合成
三、保存合成的圖片將圖片轉換爲base64，保存頭像npm

4、構建項目

本項目是基於 Vue2.6x 構建的項目canvas

第一步、佈局切圖
這是最基礎的前端技能，就略了，這裏主要就是一個輪播圖的實現，在本項目中，我把這個拆一個輪播組件，目前寫的是沒有過渡動畫特效的（有興趣的同窗能夠優化一下，加點切換動畫），以下圖
小程序

目錄components/slideshow.vueapi

<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標籤的運用

一、首先咱們要建立一個canvas元素，建立canvas繪圖的環境，設置畫布長寬

二、把利用drawImage方法（詳細的能夠移步）兩張照片繪製合成一張照片

三、設置圖片返回的格式，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的。