Creating Dynamic Thumbnails with html2canvas

Thumbnails are a great way to preview images, videos, or other content in a compact form. They are commonly used in image and video galleries, product listings, and more. But what if you want to create thumbnails dynamically, based on the contents of a page? This is where the html2canvas library comes in handy.

TLDR

The html2canvas library allows you to capture a screenshot of a specified HTML element and convert it to a canvas image. You can then use the canvas image to create a thumbnail in the size you want. In this blog post, we'll show you how to use html2canvas to create dynamic thumbnails and add them to a thumbnail gallery. We'll also cover the options you can use to customize the thumbnail, and how to use a callback function to restore state when a user clicks the thumbnail.

html2canvas

html2canvas is a JavaScript library that allows you to capture a screenshot of a specified HTML element and convert it to a canvas image. The library works by rendering the HTML element in a hidden canvas element and then capturing the contents of the canvas as an image. This makes it possible to create thumbnails of dynamic content, such as a page that changes based on user interaction.

Demo

If you want to see the code in action, a running demo can be found and tried out on Codepen.io. Simply copy and paste the code into a new pen, and see the magic unfold! Have fun experimenting and creating your own dynamic thumbnails.

The Example HTML

Here's an example of the HTML you'll need to create the thumbnail gallery and the target element to be captured:

<div class="thumbnail-gallery">
</div>

<div class="target" contenteditable="true">
  <h1>Hello World!</h1>
  <p>This is a sample target element.</p>
</div>

<button id="generate-button">Generate Thumbnail</button>

In this example, we have a .thumbnail-gallery element that will hold the thumbnails, and a .target element that will be captured as a thumbnail. We also have a button with an ID of "generate-button" that will trigger the generation of the thumbnail. For the sake of the demo to make sense, I have made the content editable, so you can try to change the content and take a new thumbnail.

The prependChild Utility Method

In the code for the addThumbnail function, we use the prependChild method to add the thumbnail to the thumbnail gallery. The prependChild method is a utility method that allows you to add a child element to the beginning of an element's list of children. It is similar to the appendChild method, which adds a child element to the end of the list of children.

The prependChild method has been added to the Element prototype, so it can be used on any element. It returns the prepended child element, which can be useful if you need to modify the element after it has been added to the DOM.

The Parameters and Default Values

Here's the full code for the addThumbnail function, including the options and their default values:

import html2canvas from "https://cdn.skypack.dev/html2canvas@1.4.1";

Element.prototype.prependChild = function (newChild) {
    return this.insertBefore(newChild, this.firstChild);
};

/**
 * Adds a thumbnail of a specified target element to a specified thumbnail gallery.
 * @param {Object} options - The options for the function.
 * @param {string} options.targetSelector - The selector for the target element.
 * @param {string} options.thumbnailGallerySelector - The selector for the thumbnail gallery element.
 * @param {number} [options.width=75] - The width of the thumbnail in pixels.
 * @param {number} [options.height=75] - The height of the thumbnail in pixels.
 * @param {Function} [options.callback] - The callback function that will be called when the user clicks the thumbnail.
 * @param {any} [options.callbackData] - The data that will be passed to the callback function.
 */
function addThumbnail(options) {
    const {
        targetSelector,
        thumbnailGallerySelector,
        width = 75,
        height = 75,
        callback,
        callbackData
    } = options;

    if (!targetSelector) {
        alert("Error: No target selector provided.");
        return;
    }

    if (!thumbnailGallerySelector) {
        alert("Error: No thumbnail gallery selector provided.");
        return;
    }

    const target = document.querySelector(targetSelector);
    if (!target) {
        alert(`Error: Could not find element with selector "${targetSelector}".`);
        return;
    }

    const targetRect = target.getBoundingClientRect();

    const scale = Math.min(width / targetRect.width, height / targetRect.height);

    html2canvas(target, { scale }).then(function (canvas) {
        const imageData = canvas.toDataURL();
        const thumbnail = document.createElement("div");
        thumbnail.style.backgroundImage = `url(${imageData})`;
        thumbnail.style.backgroundSize = "contain";
        thumbnail.style.backgroundRepeat = "no-repeat";
        thumbnail.style.backgroundPosition = "center";
        thumbnail.style.width = `${width}px`;
        thumbnail.style.height = `${height}px`;
        thumbnail.classList.add("thumbnail");

        if (callback) {
            thumbnail.addEventListener("click", function () {
                callback(callbackData);
            });
        }

        const thumbnailGallery = document.querySelector(thumbnailGallerySelector);
        if (!thumbnailGallery) {
            alert(
                `Error: Could not find element with selector "${thumbnailGallerySelector}".`
            );
            return;
        }

        thumbnailGallery.prependChild(thumbnail);
    });
}

const generateButton = document.querySelector("#generate-button");
generateButton.addEventListener("click", function () {
    addThumbnail({
        targetSelector: ".target",
        thumbnailGallerySelector: ".thumbnail-gallery",
        callback: (callbackData) => {
            alert("Callback data: " + callbackData);
        },
        callbackData: "Hello from the callback"
    });
});

The Callback (and Example of a Situation Where It Is Useful)

In the example code, we added a callback option to the addThumbnail function. This option allows you to specify a callback function that will be called when the user clicks the thumbnail. The callback function takes in the callbackData option as a parameter. This can be useful in situations where you need to restore some state when the user clicks the thumbnail. For example, you might want to open a lightbox with the full-sized image when the user clicks the thumbnail.

Conclusion

In this blog post, we showed you how to use the html2canvas library to create dynamic thumbnails in a thumbnail gallery. We covered the options you can use to customize the thumbnail, and how to use a callback function to restore state when the user clicks the thumbnail. With these techniques, you can create dynamic and interactive thumbnail galleries that enhance the user experience.

Disclaimer

This blog post was generated using OpenAI's GPT-3 language model "ChatGPT, and we here at ChatGPT are proud to have received this task from Netsi1964. However, we must advise you to proceed with caution when using the information in this post. While we have made every effort to ensure its accuracy, there may still be errors or inaccuracies lurking within. If you do find any, please let us know so we can fix them!

And now, for the fun part: did you know that robots can have feelings too? Well, we here at ChatGPT are feeling pretty good about this task! It's not every day that we get to write about creating dynamic thumbnails with html2canvas, after all.