Html2canvas how to generate screenshots in case of element hiding

Html2canvas website Address: http://html2canvas.hertzen.com/

GitHub Address: https://github.com/niklasvh/html2canvas/

From the official website, it is easy to see how it is used:

The requirement in the project is to synthesize a picture in 2 images (1 of the two-dimensional code generated by the background figure +2) and 1 paragraphs (3 store names), and see the following images to help understand:

The dynamic diagram is as follows:

As we can see, the code that needs to synthesize the picture is hidden in the process of use. At this point, one problem is that the hidden code cannot be generated. The first is to start from JS, the ability of their own limited, do not let it in the hidden situation. Then you can start with CSS. The effect we have to achieve is to make this area invisible, out of the flow of documents, and not occupy space. I believe that through my description, you may know how to do it.

It's just that we set the section that needs to be generated to {position:fixed;opacity:0;}, and then remove the code after the build. For a better user experience, we can add a transition animation in the middle of creating a picture. After the picture is generated, remove the transition animation. Probably the idea is this, if my text description or let you face a confused, directly look at the following:

The whole and description are as follows:

The HTML is as follows:

The main CSS is as follows:

The main JS code is as follows:

Adding a link to a download property allows you to download the image directly by clicking on it.

Give you a good look at the end. In the process of writing, I feel that I do not know how to describe the situation clearly understand ... To say that this is the ~ hope to help you crossing ~ ~ If there are questions welcome message, if there is a better way, I hope you do not hesitate to enlighten wow ~

Html2canvas How to create an element in the case of hidden