Online has been discussed the portraits automatic generation is how to implement, some of them are the registered ID the first letter of generated directly, and some of them are directly using the face database, so how to make a different for each user’s head image automatic generation tool, so I stirred beat my brains, think of a way to know who to know.

Identify our current technology stack

  1. canvas
  2. node
  3. Machine learning
  4. Some of the little things at the front end, when we found out we couldn’t machine learn, it was really hard, and the best idea was to crawl through a lot of data to train our model, but forget it, that’s the end of this series.

Start designing what we need

Our goal is to use VUE to build a pixel image generation tool, here directly use VUE-CLI as the front-end page processing, Express to submit data processing, such benefits are in order to make our development more appropriate to our regular development.

Page section

Here we write directly within the automatically generated Helloworld component.

Set the framework

<template> <div class="hello"> <h1>{{ msg }}</h1> <canvas id="view" width="200px" height="200px"></canvas></br> <input <input type="password" name="password" placeholder=" password" v-model="password"></br> <a href="#" v-on:click="getHead">create</a> </div> </template>Copy the code

The overall structure of the page was such that we wanted it not to be too empty before the avatar was displayed, and we didn’t want to customize the design, so we found the logo of Vue and I decided to pixelate it.

Principle of pixelation

Speaking of pixelation, this is a minor focus of this production. There are online tutorials that will show you how to pixelate an image, as follows:

  1. The page is divided into rectangular areas.
  2. Take an intermediate value for the pixel values in the page
  3. The region is then redrawn with intermediate values

The above method is common in many tutorials, but this is not what we need because there is an easier method.

1. Use an off-screen canvas to save images

    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();
    }
Copy the code

You might be surprised why I set the width and height of my off-screen canvas to 20, which is also a very important step in pixelation, as I’ll discuss below.

      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);
Copy the code

Here is the main logical part, in which the three steps are to set the anti-aliasing property of the main canvas

2. Pixel processing

        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);
Copy the code

Data [I + 3] = alpha >= 208? 255:0; This step. Canvas of the bitmap, so in the image of amplification, will be fuzzy, pixel block, this also is what we need, we make use of this principle, the image map in a small canvas, by setting the threshold value of alpha to screen the parts may result in the fuzzy, and then paint to the canvas, It’s just going to be pixel by pixel.

The overall effect is as follows, it does not feel like the original input box.

To be continued

The production of the tool Demo has entered the more difficult part, how to process user data and generate corresponding avatar data, and report the current progress.

Implemented: page layout, axiOS data request and acceptance of Express, generation of partial data of head image is being implemented: integration and rendering processing of face data is not completed: partial optimization of generation tool

Because it is not finished, I will not play the demo here. I will release the link at the end of the article, or I can go to my Git first to slip my Git

Since I don’t know what kind of tutorials you like, I need to search for them. If you like them, you can tell me, and I will sort out the relevant tutorials and principles. I will update the related technical tutorials of Canvas and SVG from time to time, including those for actual combat and master principles, including 2D, 2.5D and 3D. At the same time involved in linear algebra physics graphics and other related basic knowledge.

Welcome guests to pay attention to the coin collection