Previously we could only capture images through other screenshot tools. The functions of modern browsers have become more and more powerful. With the gradual popularization of H5, the browser itself can take screenshots. html2canvas is such a front-end plug-in. Its principle is to draw Dom nodes in Canvas. Although very convenient, it has the following limitations:
Since my usage scenario is very simple, record the exception information, and the exception page is also defined by myself, then html2canvas is enough to use.
The first time I used html2canvas, the purpose was to take a screenshot of the entire page and generate a picture for the user to save.
Let's first take a look at what HTML renders looks like.
From the image rendered by HTML, you can see that the image above has a rounded corner effect, but when I used html2canvas to convert the image, I found that the rounded corner effect of the image was not lost.
It became like this. After thinking about many solutions, I finally decided to make the rounded corners at the back into a background image. The background of the middle circle is transparent, and then it is overlaid on the original image through absolute positioning, which is equivalent to a mask effect.
Of course, the DOM node of the mask image must be below the image that requires rounded corners, similar to
<div class=avatar_img fl><div class=avatar_img fl> <img src= id=you class=avatar_pp fl /><!--Original image that requires rounded corners--> <img src=/template/images/avatar .png class=img-responsive style=position: absolute;><!--Mask image--></div>
Once generated, it will look normal.
<div class=avatar_img fl><div class=avatar_img fl> <img src= id=you class=avatar_pp fl /><!--Original image that requires rounded corners--> <img src=/template/images/avatar .png class=img-responsive style=position: absolute;><!--Mask image--></div>Copy code