How to convert multiple DIVs into multiple images and download them all at once

Forums AngularHow to convert multiple DIVs into multiple images and download them all at once
Staff asked 10 months ago

Answers (1)

Add Answer
prinkesha lathidadiya Marked As Accepted
Staff answered 10 months ago

To convert multiple <div> elements into images and download them all at once, you’ll need to use JavaScript along with the HTML5 canvas element and the FileSaver.js library. Here’s a step-by-step guide to achieving this:

  1. Include the FileSaver.js library in your HTML file. You can download it from https://github.com/eligrey/FileSaver.js/ and include it with the following code:
<script src="path/to/FileSaver.js"></script>
  1. Create a function that takes a <div> element and converts it into an image using the HTML5 canvas. This function will return a Promise that resolves with the data URL of the generated image. Here’s an example:
function convertDivToImage(div) {
  return new Promise((resolve) => {
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');
    const width = div.offsetWidth;
    const height = div.offsetHeight;
    canvas.width = width;
    canvas.height = height;

    const image = new Image();
    image.onload = () => {
      context.drawImage(image, 0, 0, width, height);
      const dataURL = canvas.toDataURL('image/png');
      resolve(dataURL);
    };

    html2canvas(div).then((canvas) => {
      image.src = canvas.toDataURL();
    });
  });
}
  1. Iterate through your <div> elements and convert each one into an image using the convertDivToImage() function. Store the resulting data URLs in an array.
const divs = document.querySelectorAll('div');
const promises = Array.from(divs).map((div) => convertDivToImage(div));

Promise.all(promises).then((dataURLs) => {
  // dataURLs contains an array of image data URLs
  // You can now download them all at once
});
  1. To download the images, create an anchor element for each data URL and trigger a click event to initiate the download.
const downloadAllImages = (dataURLs) => {
  for (let i = 0; i < dataURLs.length; i++) {
    const a = document.createElement('a');
    a.href = dataURLs[i];
    a.download = `image_${i}.png`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  }
};

downloadAllImages(dataURLs);

Put all the code together, and you’ll have a function that converts multiple <div> elements into images and downloads them all at once.

Note: This solution uses the html2canvas library to capture the content of each <div> as a canvas. Make sure to include the html2canvas library in your HTML file by adding the following script tag:

<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

Remember to adjust the paths to the required libraries based on your project structure.

Subscribe

Select Categories