使用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都会包含到，同时涉及的有 线性代数 物理 图形学等相关的基础知识。

欢迎各位客官收藏关注 投硬币包养