Image fragmentation loading function based on HTML code

Time:2020-9-16

Today, let’s implement an image fragmentation loading effect. The effect is as follows:

 

We implement it in three steps:

  • Define HTML structure
  • Split picture
  • Write animation function

Define HTML structure

All you need is a canvas element.


<html>
  <body>
    <canvas
      id="myCanvas"
      width="900"
      height="600"
      style="background-color: black;"
    ></canvas>
  </body>
</html>

Split picture

In this example, we split the image into 100 small fragments according to a grid of 10 rows and 10 columns, so that each small fragment can be rendered independently.

let image = new Image();
image.src = "https://cdn.yinhengli.com/canvas-example.jpeg";
let boxWidth, boxHeight;
//Split into 10 rows and 10 columns
let rows = 10,
  columns = 20,
  counter = 0;

image.onload = function () {
  //Calculate the width and height of each row and column
  boxWidth = image.width / columns;
  boxHeight = image.height / rows;
  //Loop rendering
  requestAnimationFrame(animate);
};

RequestAnimationFrame: tell the browser that you want to execute an animation and ask the browser to update the animation before calling the specified callback function before next redraw.

Write animation function

Next, we write animation functions to let the browser render a small fragment randomly before each redraw.

The core here is context.drawImage method.

let canvas = document.getElementById("myCanvas");
let context = canvas.getContext("2d");

function animate() {
  //Randomly render a module
  let x = Math.floor(Math.random() * columns);
  let y = Math.floor(Math.random() * rows);
  //Core
  context.drawImage(
    image,
    X * boxwidth, // starting position of abscissa in canvas
    Y * boxheight, // starting position of ordinate in canvas
    Boxwidth, // width of drawing (width of small fragment image)
    Boxheight, // drawing height (height of small fragment image)
    X * boxwidth, // start drawing from the X coordinate of the large picture
    Y * boxheight, // start drawing from the Y coordinate of the large picture
    Boxwidth, // starting from the x position of the large image, how wide is it drawn (the width of the small fragment image)
    Boxheight // starting from the Y position of the large image, how high is the drawing (the height of the small fragment image)
  );
  counter++;
  //If the module is rendered 90%, let the whole picture be displayed.
  if (counter > columns * rows * 0.9) {
    context.drawImage(image, 0, 0);
  } else {
    requestAnimationFrame(animate);
  }
}

Complete code

<html>
  <body>
    <canvas
      id="myCanvas"
      width="900"
      height="600"
      style="background-color: black;"
    ></canvas>
    <script>
      let image = new Image();
      image.src = "https://cdn.yinhengli.com/canvas-example.jpeg";
      let canvas = document.getElementById("myCanvas");
      let context = canvas.getContext("2d");
      let boxWidth, boxHeight;
      let rows = 10,
        columns = 20,
        counter = 0;

      image.onload = function () {
        boxWidth = image.width / columns;
        boxHeight = image.height / rows;
        requestAnimationFrame(animate);
      };

      function animate() {
        let x = Math.floor(Math.random() * columns);
        let y = Math.floor(Math.random() * rows);
        context.drawImage(
          image,
          X * boxwidth, // starting position of abscissa
          Y * boxheight, // starting position of ordinate
          Boxwidth, // the width of the image
          Boxheight, // image height
          X * boxwidth, // place the X coordinate position of the image on the canvas
          Y * boxheight, // place the Y coordinate position of the image on the canvas
          Boxwidth, // the width of the image to be used
          Boxheight // height of image to use
        );
        counter++;
        if (counter > columns * rows * 0.9) {
          context.drawImage(image, 0, 0);
        } else {
          requestAnimationFrame(animate);
        }
      }
    </script>
  </body>
</html>

summary

Through this demo, we use the canvas API to implement the image fragment loading effect. Isn’t it particularly simple!

This article on the HTML code based on the realization of image fragmentation loading function on this, more related HTML image fragment loading content, please search the previous articles of developeppaer or continue to browse the related articles below, I hope you will support developeppaer more in the future!