The solution of html2canvas that pictures cannot be captured normally

question

First, let me talk about the problem I encountered. First of all, there is such a demand. The front end needs to dynamically generate pictures based on the data sent from the back end. The text, background image, and user avatar in the picture are all obtained through the backend interface. However, some images were successfully generated in the canvas using the canvas generated by html2canvas. But some pictures cannot be displayed no matter what.

Official Documentation

I worked on the project for a long time without success, and searched on Google for a long time without success. There was a bit of despair at this moment. Suddenly it occurred to me, why not go to its official website. So I saw the following content on the official website.

Limitations<br/>
All the images that the script uses need to reside under the same origin for it to be able to read them without the assistance of a proxy. Similarly, if you have other canvas elements on the page, which have been tainted with cross-origin content, they will become dirty and no longer readable by html2canvas.<br/>
The script doesn't render plugin content such as Flash or Java applets.

What is it about? Here is a translation for those who are not good at English. Those who are good at English can read the above text directly. The general meaning is that in html2canvas, scripts are used to operate, that is, scripts are used to convert HTML into canvas, but there is a limitation, that is, cross-source images cannot be used. If used, html2canvas will not read the resource.

This is why some images on the converted canvas are always blank. If there are other canvases on the page that also use cross-origin image resources, html2canvas will not read them.

Solution

Just forward the static resources once and allow loading cross-origin resources in the html2canvas configuration.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.