Html2canvas about pictures not properly intercepted

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.