使用canvas打造一款像素风头像生成工具

最新推荐文章于 2020-11-25 04:19:09 发布

weixin_34226182

最新推荐文章于 2020-11-25 04:19:09 发布

阅读量3k

点赞数

文章标签：游戏 javascript 前端 ViewUI

原文链接：https://juejin.im/post/5af5993c6fb9a07aac2484fd

版权

网上曾有人讨论过那些头像自动生成是如何实现，有些是采用的注册ID的首字母直接生成，也有些是直接使用的头像数据库，那么如何来制作一个让每个用户的头像都不同的头像自动生成工具呢，于是我搅了搅脑汁，想到一个不知为谁所知的办法。

确定我们目前的技术栈

canvas
node
~~机器学习~~
一些前端的小操作当我们发现我们不会机器学习的时候，这就很难受了，最好的想法是去爬取大量数据来训练我们的模型，算了，不做了，本系列到此为止。

开始设计我们所需的东西

我们的目标是要用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. 使用离屏的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框很有感觉。