How is the avatar of github stackoverflow vertx generated?

1) A solid day

As code farmers, we have to face the squeeze from capital and the pressure of work from the moment we leave school. In order to save time and effort, we had to linger on Github, the world’s largest same-sex dating platform, just thinking about finding a free wheel to quickly realize our needs. After a crackling search, you finally found the tool you wanted, and you smiled slightly, thinking that everything is under your control.

You spent 5 minutes browsing the README. In fact, you didn’t read anything about the project’s introduction and precautions, so you couldn’t wait to get into Quickly-Start. Open the project, introduce dependencies, ctrl-cv, run, your movements are extremely proficient and elegant, and you even took some time to reply to WeChat messages. Everything is in order. It seems that today is another day without overtime. Eh? ? ? wocao, why did I report an error, what the hell, even copying and pasting can report an error?

You panicked, but only panicked for two minutes, and you quickly calmed down. Obviously, a small error report can’t help you at all. Copy the error message, paste it into the search box, press Enter, and enter the first search result. You have modified it according to the content of the article, but still report an error, and you have given up this article decisively. Half an hour later, you found that the content of the second, third and first articles were exactly the same, and you closed the tab of the browser directly in a fit of anger. I know that you still have a back trick – stackoverflow. The reason why you didn’t use it at the beginning is just because your talent in English is not as dazzling as your appearance.

You steadily opened stackoverflow to search for your question, opened the first matching result, and scrolled down to see other users’ replies. Although the screen is full of familiar text, you still choose to right-click -> translate to Chinese (simplified). You finally found the real solution, because after you modified the project according to the content in the reply, the project worked normally. You are secretly happy in your heart, but you are pressing hard not to show it on the surface. If you don’t have a stackoverflow account, you have to say a few words to thank the brother who posted this reply. You look at the reply posted by this old man, eh… no… why is what he said so familiar… I seem to have seen it somewhere, until you saw the beginning of this reply: The following is excerpted from the README of the project repository…

If you are lucky, you may even have time to visit v2ex, pick a few posts you are interested in, click in and read the comments, you see a funny reply, unfortunately you cannot follow the post without an account. Then you open WeChat and reply to all messages. Look at the time, yeah, 17:35, ready to leave work, today is another solid day.

2) How to generate an avatar

You registered stackoverflow and v2ex accounts as soon as you arrived at the company the next day. You wanted to write something to thank the reply that provided the solution, but if you think about it, forget it. I know you just don’t know how to express gratitude , not because of the language barrier. You are bored and clicking on the homepage, you suddenly pay attention to the avatar generated by stackoverflow, and then you open Github and v2ex, and find that they are all similar avatars. Like this:

382827e41dd4e307fa0aa154e48d8637.png

You are very confused: Hey, how did these websites generate my avatar for me?

3) Implementation

In fact, I don’t know how they generate avatars. After all, I didn’t participate in the development of these functions, but I can provide an alternative relatively simple implementation.

3-1) Profile analysis

  1. The avatar contains two colors, which can be imagined as filling the image with one color (background color), and then painting with another color (foreground color) at a fixed position to form a characteristic pattern in the middle;
  2. The characteristic pattern is composed of small squares, and each small square is like a pixel;
  3. The avatar is left-right symmetrical, and the left and right sides are completely symmetrical according to the vertical line;
  4. The characteristic pattern of the avatar will not completely occupy all the space, but will leave a certain margin on the outermost side.

3-2) Implementation steps

  1. Take the user’s characteristic value (such as email address) to obtain a byte array through the digest algorithm;
  2. Use this array to draw a feature pattern, and the parity of each element in the array determines whether the corresponding coordinates are filled with the foreground color;
  3. Flip the characteristic pattern according to the vertical line to obtain a complete characteristic pattern;
  4. At this time, the size of the obtained image is small, and the characteristic head portrait can be obtained after maintaining the aspect ratio and enlarging several times;
  5. Just add a suitable border to the avatar.

For example, although the byte array obtained in the first step is [4, -125, -7, 230…], we hope to get a feature pattern of 8*8 units at this time. The correspondence between our feature patterns and the subscripts of the array elements is shown below.

00 01 02 03 || 03 02 01 00
04 05 06 07 || 07 06 04 04
08 09 10 11 || 11 10 09 08
12 13 14 15 || 15 14 13 12
16 17 18 19 || 19 18 17 16
20 21 22 23 || 23 22 21 20
24 25 26 27 || 27 26 25 24
28 29 30 31 || 31 30 29 28

Then, the subscript 00 corresponds to 0 (even number: 4), and the subscript 01 corresponds to 1(odd number: -125)… and so on.

3-3) Code example

ImagePipes.ofEmptySource()
        .register(new HashImageGenerator.Builder("[email protected]") // avatar generator
                .gridVerticalNum(8) // 8 * 8
                .bgColor(ColorUtils.of(240, 240, 240)) // background color
                .fgColor(ColorUtils.of(50, 150, 50)) // foreground color
                .build())
        .toThumbnails()
        .addFilter(new HighQualityExpandHandler.Builder() // image lossless amplifier
                .finalWidth(300) // final width
                .keepAspectRatio(true) // keep aspect ratio
                .build())
        .addFilter(new BorderHandler.Builder() // border handler
                .fillColor(ColorUtils.of(200, 200, 200)) // border background color
                .alpha(1.0f) // border transparency
                .vMargins(20) // vertical margin
                .hMargins(20) // Margins in the horizontal direction
                .build())
        .scale(1.0)
        .toFile(".../avatar.png");

After the above code snippet is executed, the following avatar will be obtained.

avatar.png

4) About Imglib

You may have realized this, yes, I am here to promote the project, _.

4-1) Brief introduction

In order not to make everyone feel disgusted, I will only briefly introduce a few words here. Friends who are interested can visit the homepage. This is the portal. Here are the main features that imglib already has:

Imglib? is a lightweight JAVA image processing library, based on simplifying the common processing of images.

  • In addition to generating user avatars, it is possible to create other images as well as take screenshots, extract images from GIFs, PDFs, etc.;
  • Common processing of images such as scaling, cropping, rotating, image watermarking, format conversion, adding borders, mosaics, rounded corners, grayscale, binarization, drawing shapes, etc.;
  • Splitting, stitching images, writing multiple images into GIF animations and other functions.

4-2) Project status and future

This project is currently open source and published to maven-repository. The documentation is also relatively complete, with examples written for many functions, and Chinese and English documents are supported.

Although this project has just started, the ease of use and practicability of the existing functions have not been verified. It is expected that it will be gradually iterated and improved in the future, and it is hoped that like-minded partners will join in. At the same time, I also hope that this project can keep moving forward. New blood is needed to move forward. If you have new features that you hope to implement in the next version, or any comments or suggestions, and anything you want to say, you can comment District tell me!