Solution to the problem of blank screenshot of html2canvas

Time:2020-4-1

Recently, I met a requirement in the project, which needs to provide the function of web page screenshot. Baidu found that html2canvas is very easy to use. Then try it.

Resource download address

Plug in download address: html2canvas download address

Usage mode

The development mode of react component used in the project. Refer to the official document getting-started.md, and follow the steps below:

1. Use the following command to install


npm install html2canvas --save

2. Introducing html2canvas into the file


import html2canvas from 'html2canvas';

3. Use in files


html2canvas(document.body).then(function(canvas) {
document.body.appendChild(canvas);
});

Problems encountered

Use in this way, the page does not have a scroll bar, and a large blank appears when there is a scroll bar.

The error screenshot is as follows:

Solution

Take a close look at the configuration.md and the analysis of netizens, and finally solve the problem. The code snippet is as follows

The last correct screenshot is as follows:

Configuration item description in code

1. The reason why the screenshot is blank is that the height of the container is set to be equal to the height of the page containing the scroll bar. This one can solve the problem of blank space.
2. The reason for setting the width and height attributes is that the width and height of the area shown in the screenshot are fixed, that is, the visible area of the current screen.
3. The reason for setting the X and Y coordinates is that when there is a scroll bar on the page, you need to specify the starting position of the screenshot. In this project, there is no scroll bar in the x-axis direction, so it is set to zero; there is a scroll bar in the y-direction, so you need to get the current direction of the scroll coordinates.
4. Generally, there will be pictures in the web page. If there is a link address in the picture, the usecors property can be set to ensure the loading of pictures.

This article is about how to solve the problem of blank screenshots of html2canvas. For more information about the blank screenshots of html2canvas, please search the previous articles of developepaer or continue to browse the following articles. I hope you can support developepaer in the future!

Recommended Today

Redis design and implementation 4: Dictionary Dict

In redis, the dictionary is the infrastructure. Redis database data, expiration time and hash type all take the dictionary as the underlying structure. Structure of dictionary Hashtable The implementation code of hash table is as follows:dict.h/dictht The dictionary of redis is implemented in the form of hash table. typedef struct dictht { //Hash table array, […]