Html2canvas about pictures not properly intercepted

Problem

First of all, talk about what happened. First there is such a demand. The front end is required to transmit data from the backend and generate the images dynamically. The copy, background image, and user picture are all obtained through the backend interface. But some of the canvases generated using Html2canvas have been successfully generated in the canvas. But some pictures don't show up anyway.

Official documents

In the project inside the operation of a half-day has not been, Google has a half-day not fruit. There is a little despair at this time. Suddenly think of, why not go to its official website to see it. So I saw the following on the official website.

Limitations

All the images, the script uses need to reside under, origin for it, same to read able them the without Ance of a proxy. Similarly, if you had other canvases elements on the page, which had been tainted with cross-origin content, they would bec ome dirty and no longer readable by Html2canvas.

The script doesn ' t render plugin content such as Flash or Java applets.

Speaking of what, here for the English poor students to translate a bit. Good English can directly look at the text. The idea is that in Html2canvas, the script is used to manipulate the HTML into canvas, but there is a limitation that you cannot use cross-origin images. If used, Html2canvas will not read the resource.

This is why some pictures of the canvas that have been converted are always blank. If there are other canvases in the page that also use cross-origin picture resources, Html2canvas will not read them.

Solution Solutions

It is possible to do a forwarding of static resources and allow the loading of cross-source resources within the Html2canvas configuration.

Html2canvas about pictures not properly intercepted