The National Day is coming. Use JS to implement a small tool to generate a National Day style avatar. Detailed explanation of the implementation process

The technologies used here are:

• HTML+ CSS+ JavaScript;
• download.js library;
• fabric.js library;

First go to the experience link: g.cuggz.com/.​

Note: You can click on the link above to use it, but my domain name has been blocked by TX and I am still appealing, so I cannot open it in QQ or WeChat. You need to copy the link to the browser to view and use it.​

Here is a screenshot of the gadget:

1. Page Layout

I won't say much about this part, just go straight to the code:

<div class="wrapper">
    <!-- Select box -->
    <div class="main-box">
      <a class="prev" onClick='changeHat()'></a>
      <div class="main-img">
        <div id="content">
          <canvas id='cvs'></canvas>
        </div>
      </div>
      <a class="next" onClick='changeHat()'></a>
    </div>
    <!-- Export Graph -->
    <img id='export-img' alt='National Day exclusive avatar' src='' crossorigin="anonymous"/>
    <!-- Action Button -->
    <div class="operation-btns">
      <a class="upload-btn">
        <input id='upload' type='file' onchange='viewer()' style='opacity: 0;'/>
      </a>
      <a class="export-btn" onClick='exportFunc()'></a>
    </div>
  </div>
 <!-- Template -->
  <div style='display: none'>
    <img id='img' src='' alt='' />
    <img class='hide' id='hat0' src='img/1.png' />
    <img class='hide' id='hat1' src='img/2.png' />
    <img class='hide' id='hat2' src='img/3.png' />
    <img class='hide' id='hat3' src='img/4.png' />
    <img class='hide' id='hat4' src='img/5.png' />
    <img class='hide' id='hat5' src='img/6.png' />
    <img class='hide' id='hat6' src='img/7.png' />
  </div>

This page is relatively simple. There is a large background image on the outside, an avatar display box and a template switch button in the middle, and an upload button and a download button below. After the page layout is completed, it is time to write the style. The CSS code is as follows:

body,
html {
    min-height: 100%;
    width: 100%;
    user-select: none;
    font-size: 18px;
}

.wrapper {
    width: 100%;
    height: 100%;
    max-width: 620px;
    max-height: 800px ;
    margin: 0 auto;
    background-image: url('../img/bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding-top: 13em;
}

#export-img {
    display:none;
    margin:0 auto;
    width:250px;
    height:250px;
}

.main-box {
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-box .next,
.main-box .prev {
    background-image: url('../img/next.png');
    background-size: contain;
    border-radius: 50%;
    width: 2.275rem;
    height: 2.275rem
}

.main-box .prev {
    transform: rotate(180deg)
}

.main-box .main-img {
    margin: 0.75rem;
    background: #fff;
    border: .25rem solid #fbe6b5;
    border-radius: .75rem;
    font-size: 0
}

#content {
    border-radius: .5rem;
    position: relative;
    width: 9.5rem;
    height: 9.5rem;
    margin-left: 50%;
    transform: translateX(-50%);
    overflow: hidden
}

.operation-btns {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: .75rem
}

.operation-btns .upload-btn {
    width: 11.6rem;
    height: 3.6rem;
    background-size: 100% 100%;
    background-image: url('../img/upload.png')
}

.operation-btns .export-btn {
    display: none;
    width: 11.6rem;
    height: 3.75rem;
    background-size: 100% 100%;
    background-image: url('../img/export.png')
}

Here is just a simple implementation for reference only. There are still many areas that can be optimized, which will not be modified here. Those who are interested can customize them themselves.

2. Image upload and display

The next step is to implement the logic part. First, there are several global variables that need to be defined, which will be used later:

let canvasFabric; // Canvas instance let hat = "hat0"; // Current template class
let hatInstance; // Template layer instance const screenWidth = document.getElementById("content").scrollHeight; // Content box height

After that, we need to process the uploaded image and display it on the page:

function viewer() {
  // Get the uploaded image file const file = document.getElementById("upload").files[0];
  // Get the tag that needs to display the image const img = document.getElementById("img");
  // Create a file to read the file object const reader = new FileReader();
  if (file) {
    //Convert the file to Base64
    reader.readAsDataURL(file);
    // Triggered when the file is read successfully reader.onload = () => {
      // Assign the base64 url ​​to the tag where the image is to be displayed img.src = reader.result;
      // Image loading completed trigger img.onload = () => img2Cvs(img);
    }
  } else {
    img.src = ""
  }
}

The HTML5 FileReader object is used here, which provides methods for reading files and an event model that contains the reading results. You can use new to initialize the object. The FileReader object contains four methods, three of which are used to read files and one is used to interrupt reading. It should be noted that regardless of whether the reading succeeds or fails, the method does not return the reading result, which is stored in result attribute. The readAsDataURL method is used here. MDN describes this method as follows:

The readAsDataURL method reads the specified Blob or File object. When the read operation is complete, readyState will change to DONE and loadend (en-US) event will be triggered. At the same time, the result attribute will contain a string in the format of data: URL (base64 encoded) to represent the contents of the read file.

That is to say, the uploaded image is converted into a URL in Base64 format and assigned to the tag that displays the image, so that the tag displays the avatar. The effect is as follows:

This completes the uploading and display of the image. Next, it is time to initialize a canvas.

3. Initialize the canvas

At the end of the above code, img.load is executed. The onload event here will be executed immediately after the image is loaded. After the image is displayed, the img2Cvs method will be executed. This method is mainly used to initialize a canvas and display and hide some elements of the page.

The fabric library is used in the img2Cvs method. Fabric.js is a library that can simplify Canvas program writing. Fabric.js provides the missing object model, svg parser, interaction and a whole set of other indispensable tools for Canvas . Canvas provides a good canvas capability, but the API is not friendly enough. Fabric.js was developed for this purpose, and it mainly uses objects to write code. Fabric.js can do the following:

• Create and fill graphics on Canvas (including pictures, text, regular graphics, and graphics composed of complex paths).
• Fill the shape with gradient color.
• Combined graphics (including combined graphics, graphic text, pictures, etc.).
• Set up graphical animations to set user interactions.
• Generate JSON, SVG data, etc.
• The generated Canvas object comes with drag-and-drop functionality.

You can install the fabric.js library through the npm command:

npm install fabric --save

You can also reference it via CDN:

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.6/fabric.min.js"></script>

Let's take a look at how the img2Cvs method is implemented:

function img2Cvs(img) {
   // Get and display the canvas, and set the canvas size to the size of the image const cvs = document.getElementById("cvs");
    cvs.width = img.width;
    cvs.height = img.height;
    cvs.style.display = "block";
   
   // Create a canvas and set its position and background image canvasFabric = new fabric.Canvas("cvs", {
      width: screenWidth,
      height: screenWidth,
      backgroundImage: new fabric.Image(img, {
        scaleX: screenWidth / img.width,
        scaleY: screenWidth / img.height
      })
    });
   // Switch template changeHat();
  // Hide the upload image button and display the download image button document.getElementsByClassName("upload-btn")[0].style.display = "none";
    document.getElementsByClassName("export-btn")[0].style.display = "block";
  }

fabric.Canvas() method here has two parameters. The first parameter is canvas ID, and the second parameter is the configuration item when initializing the canvas. Here we set the initial canvas size and background image, and use the avatar we uploaded as the background image. The background image here is an instantiated fabric.Image object. The first parameter of the object when initialized is the image object, and the second parameter is the style setting configuration object of the image.​

After creating the canvas, you need to switch to the first template, hide the upload image button, and display the download avatar button. This completes the first step. Now let’s take a look at how to switch existing templates.

4. Switch template

Next, let's take a look at how to switch templates:

function changeHat() {
   // Hide the current template document.getElementById(hat).style.display = "none";
   // Get all templates const hats = document.getElementsByClassName("hide");
    hat = "hat" + (+hat.replace("hat", "") + 1) % hats.length;
   // Get the current template and display it const hatImage = document.getElementById(hat);
    hatImage.style.display = "block";
   // If a layer currently exists, remove it if (hatInstance) {
      canvasFabric.remove(hatInstance)
    }
   // Add the current template as a layer object hatInstance = new fabric.Image(hatImage, {
      top: 0,
      left: 0,
      scaleX: screenWidth / hatImage.width,
      scaleY: screenWidth / hatImage.height,
      cornerColor: "#0b3a42",
      cornerStrokeColor: "#fff",
      cornerStyle: "circle",
      transparentCorners: false,
      rotatingPointOffset: 30
    });
   // Set the layer object to be non-stretchable hatInstance.setControlVisible({
       mt: false, 
       mb: false, 
       ml: false, 
       mr: false, 
       bl: false, 
       br: false, 
       tl: false, 
       tr: false, 
       mtr: false, 
    })
   // Add the layer to the canvas canvasFabric.add(hatInstance);
  }

By default, fabric.js elements come with eight points to scale any object. Here we don't want users to stretch fabric object horizontally or vertically. We can set it to be non-stretchable through setControlsVisibility() method. This method requires passing in a configuration object that contains eight scaling points, all of which are set to false .​

Finally, we add the layer generated by the template to the canvas. Here we use the add method, which is an event provided by fabric. The following are the common events officially provided by fabric.js:

• object:added layer
• object:modified edit layer
• object:removed layer
• selection:created The first selected layer
• selection:updated Layer selection changes
• selection selection:cleared Clears the selected layer
  

5. Output the image

After the above steps, we have initialized a canvas. The background of the canvas is the picture we uploaded. There is also a layer on the canvas, which is the template we chose. The last step is to output the synthesized image. Let's take a look at what happens when you click the Download Image button:

function exportFunc() {
  // Hide the selection box, upload and download buttons, and canvas document.getElementsByClassName("main-box")[0].style.display = "none";
  document.getElementsByClassName("operation-btns")[0].style.display = "none";
  document.getElementById("cvs").style.display = "none";

  // Generate a URL from the canvas and assign it to the corresponding tag for display const exportImage = document.getElementById("export-img");
  exportImage.style.display = "block";
  exportImage.src = canvasFabric.toDataURL({
    width: screenWidth,
    height: screenWidth
  });
  // Download the generated image window.confirm("Do you want to download the avatar") ? download(exportImage.src, "National Day avatar", 'image/png') : void 0
}

Here we use the toDataURL method to generate an image from the canvas instance object. This is a method of fabric object that can export the canvas as an image and export a URL in Base64 format. In this way, the img tag can display the final image after obtaining the URL.​

Finally, an optional function is added, which is to download the generated avatar. The download.js library is used here. The first parameter of this method is the URL of the image, the second parameter is the name of the downloaded image, and the third parameter is the format of the image.​

These are all the functions of this small application. It is just a simple implementation and there is still a BUG. It mainly provides an implementation idea. I have never been exposed to the concept of canvas before, so I learned a lot this time. I will learn more about its usage when I have time in the future, interesting !​

This concludes this article about the National Day, how to use JS to implement a tool to generate National Day style avatars, and the detailed implementation process. For more related content about using JS to generate National Day style avatars, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!