First, let’s talk about what problems we encountered. First of all, there is such a need. The front end needs to dynamically generate images based on the data passed from the back end. The copywriting, background images, and user avatars in the images are all obtained through the back-end interface. However, some images in the canvas generated using html2canvas were successfully generated in the canvas. But some pictures won't show up anyway.
Official documentationI have been working on the project for a long time with no results, and I have been searching on Google for a long time with no results. There was some despair at this time. Suddenly it occurred to me, why not check out 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 talking about? Here is a translation for students who are not good at English. If you are good at English, you can read the above directly. The general meaning is that in html2canvas, scripts are used to operate, that is to say, scripts are used to convert html into canvas, but there is a restriction, that is, cross-source images cannot be used. If used, html2canvas will not read the resource.
This is why some pictures in the converted canvas are always blank. If there are other canvases in the page that also use cross-source image resources, html2canvas will not read them.
solutionJust forward the static resources once and allow loading of cross-origin resources in the configuration of html2canvas.
The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.