Recently, I encountered a requirement in the project, which needs to provide the function of screenshots of web pages. Baidu found that html2canvas is very useful. Then try it.
Resource download address
Plug-in download address: html2canvas download address
How to use
The React component development method used by the project. Refer to the official documentation getting-started.md and follow the steps below: 1. Install npm install html2canvas --save
using the following command 2. Introduce html2canvas import html2canvas from 'html2canvas' in the file; 3. Use html2canvas( document.body).then(function(canvas) { document.body.appendChild(canvas); });
problems encountered
When used in this way, the page is ok without a scroll bar, but there is a large blank space when there is a scroll bar.
The screenshot of the error is as follows:
solution
Carefully looked at configuration.md and the analysis of netizens, and finally solved it. The code snippet is as follows
. The last correct screenshot is as follows:
Configuration item description in code
1. The blank of the screenshot is due to the problem of the height of the container. Set the height of the windowHeight equal to the height of the page including the scroll bar to get the content in the scroll bar. This one can solve the blank problem.
2. The reason for setting the width and height properties is that the width and height of the area displayed by the screenshot in the page are fixed, which is the visible area of the current screen.
3. The reason for setting the x and y coordinates is that when the page has a scroll bar, 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 scrolling coordinates of the current direction.
4. There are pictures in general web pages. When there are links in the pictures, setting the allowTaint property can ensure the loading of pictures.