使用canvas打造一款像素風頭像生成工具

網上曾有人討論過那些頭像自動生成是如何實現，有些是採用的註冊ID的首字母直接生成，也有些是直接使用的頭像數據庫，那麼如何來製做一個讓每一個用戶的頭像都不一樣的頭像自動生成工具呢，因而我攪了攪腦汁，想到一個不知爲誰所知的辦法。

肯定咱們目前的技術棧

1. canvas
2. node
3. 機器學習
4. 一些前端的小操做 當咱們發現咱們不會機器學習的時候，這就很難受了，最好的想法是去爬取大量數據來訓練咱們的模型，算了，不作了，本系列到此爲止。

---

開始設計咱們所需的東西

咱們的目標是要用vue來搭建一個像素風頭像生成工具，這裏直接使用Vue-cli做爲前端的頁面處理，express來進行提交數據的處理，這樣的好處是爲了使咱們的開發更貼切咱們的常規開發。

頁面部分

這裏咱們直接在自動生成的Helloworld組件內去編寫。

框架設定

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <canvas id="view" width="200px" height="200px"></canvas></br>
    <input type="email" name="email" placeholder="郵箱" v-model="email">
    <input type="password" name="password" placeholder="密碼" v-model="password"></br>
    <a href="#" v-on:click="getHead">create</a>
  </div>
</template>
複製代碼

頁面的總體構架如此，咱們想在頁面沒有顯示頭像以前不至於太過空蕩，又不想去自定設計圖，因而咱們發現了vue的logo圖，因而我打算對它像素化一番。

像素化原理

談到像素化，這個算是本次製做的一個小重點，網上有的教程會告訴你如何對一張圖進行像素化處理，原理以下:

1. 頁面分紅數個矩形區域。
2. 對頁面中的像素值取中間值
3. 而後對區域進行中間值重繪

以上方法在不少教程裏家常便飯，可是這裏卻不是咱們所須要的，由於有個更簡單的方法。

1. 使用離屏的canvas來保存圖片

this.offCan=document.createElement('canvas');
    this.offCan.width=20;
    this.offCan.height=20;
    this.default_logo.src=logo;
    this.default_logo.onload =function(){
      _self.render();
    }
複製代碼

也許會很奇怪爲何個人離屏canvas設置的寬高是20，這也是像素化的狠重要一步，下面會講到。

this.ctx=this.view.getContext('2d');
      this.o_ctx=this.offCan.getContext('2d');
      this.o_ctx.drawImage(this.default_logo,0,0,20,20);
      this.ctx.imageSmoothingEnabled = false;
      this.ctx.webkitImageSmoothingEnabled = false;
      this.ctx.msImageSmoothingEnabled = false;
      this.bitMap(this.o_ctx);
      this.ctx.drawImage(this.offCan,0,0,200,200);
複製代碼

這裏則是主要的邏輯部分，其中三步的設置是設置了主canvas的抗鋸齒屬性

2. 像素處理

var arrayData=this.o_ctx.getImageData(0,0,20,20);
        var data = arrayData.data;
        for (var i = 0; i < data.length; i += 4) {
            var red = data[i];
            var green = data[i + 1];
            var blue = data[i + 2];
            var alpha = data[i + 3];

            data[i]     =  red ;    
            data[i + 1] =green ;
            data[i + 2] = blue; 
            data[i + 3] = alpha >= 208 ? 255 : 0;               
        }
        ctx.putImageData(arrayData, 0, 0);
複製代碼

其中的玄機就是在data[i + 3] = alpha >= 208 ? 255 : 0;這一步。 canvas繪製的位圖，因此在圖像進行放大的時候，就會模糊，出現像素塊，這也就是咱們所須要的，咱們利用這一原理，將圖像繪製在小的畫布上，經過設置alpha的閾值來篩選調部分可能致使模糊的部分，最後再繪製到主畫布上的時候，就只剩一塊一塊的像素塊了。

總體的效果圖以下，是不感受原生的input框頗有感受。

未完待續

工具demo的製做已經算是進入了比較難的一部分，如何對用戶數據的處理並生成對應的頭像數據，報一下當前的進度。

已經實現: 頁面的佈局，axios對express的數據請求與接受，頭像局部數據的生成 正在實現:臉部數據的整合與渲染處理 未完成 :生成工具的局部優化

由於未完成，因此這裏不放demo了，會在末尾篇內放出鏈接，也能夠先去個人git裏溜一溜 個人git

由於不知道你們喜歡什麼類型的教程，因此出的時候，都須要去搜素，若是你們有喜歡的，能夠告訴我，我來整理相關的教程與原理 不按期更新canvas與svg的相關技術教程，有實戰型，也會有主原理型的，2d 2.5d 3d都會包含到，同時涉及的有 線性代數 物理 圖形學等相關的基礎知識。

歡迎各位客官收藏關注 投硬幣包養