Скачать или смотреть How to Capture Images Using html2canvas for Web Applications

Learn how to resolve the common issue of `html2canvas` not capturing images correctly in your web projects. Follow our step-by-step guide and make screenshots easy!
---
This video is based on the question https://stackoverflow.com/q/65992427/ asked by the user 'Altro' ( https://stackoverflow.com/u/14091482/ ) and on the answer https://stackoverflow.com/a/65993259/ provided by the user 'Tschösi' ( https://stackoverflow.com/u/9903391/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: html2canvas not taking capture of image

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Introduction

When building web applications, capturing screenshots can be a useful feature. However, developers often run into the issue where html2canvas fails to capture images (like those in <img> tags) or certain external elements. If you’ve been struggling with this, you’re not alone. In this guide, we'll explore why this issue arises and, most importantly, how to solve it effectively.

The Problem with html2canvas

The core problem lies in the configuration and properties of the html2canvas library. Although html2canvas works wonders for text and div elements, it may skip capturing images or certain external components such as custom elements (e.g., <deckgo-drr>). This inconsistency can be frustrating, especially if you're aiming for a complete screenshot of what users see on their screens.

Common Symptoms

Images not appearing in the screenshot.

Custom components or third-party libraries not rendering correctly in the output.

Only text and basic HTML elements being captured.

Solution: Enabling CORS

A reliable solution to ensure your <img> elements are captured alongside other components is to enable CORS (Cross-Origin Resource Sharing) support within html2canvas. This is crucial when images loaded from external sources (like stock photo websites) are not being captured properly.

Step-by-Step Guide to Fix the Issue

Modify Your Code: Ensure that you set the useCORS option to true in your html2canvas function call.

Here’s how to adjust the existing code correctly:

[[See Video to Reveal this Text or Code Snippet]]

Use Appropriate Image Sources: Make sure that the images you are trying to capture have the right CORS headers. Most image-hosting services or CDNs support this, but it's worth verifying.

Check Browser Console for Errors: If images are still not rendered, check your browser's console for possible CORS-related errors. This can help diagnose if the image source permissions are set up correctly.

Test with Local and Remote Images: Use both local images and remote URLs to check if the useCORS setting resolves the problem.

Conclusion

Capturing screenshots of web applications using html2canvas should be straightforward, but CORS can introduce hurdles if images aren’t loaded correctly. By following the steps above and setting the useCORS property to true, you can significantly improve your screenshot capabilities. Whether you're aiming for full-page captures or specific components, these adjustments can ensure the images are included in your screenshots.

With these insights, you're now equipped to tackle the common challenges that come with using html2canvas. Happy coding and capturing!