Explain the solution that the screenshot of html2canvas cannot capture the rounded corner image,

Explain the solution that html2canvas cannot intercept the rounded corner image,

In the past, we could only use other tools to capture images. Modern browsers have become more and more powerful. With the increasing popularity of H5, the browser itself can be used. Html2canvas is such a front-end plug-in. Its principle is to draw Dom nodes in the Canvas. Although convenient, there are the following restrictions:

• Iframe not supported
• Cross-origin images are not supported
• Cannot be used in browser plug-ins
• Some browsers do not support SVG Images
• Flash not supported
• Does not support ancient browsers and IE, if you want to confirm whether a browser is supported, you can use it to access http://deerface.sinaapp.com/Try :)

Because my application scenario is very simple, record the exception information, and the exception page is defined by myself, html2canvas is enough.

The first time I used html2canvas, I wanted to generate an image for the whole page and save it to the user.

Let's take a look at what HTML Rendering looks like.

The image rendered in HTML can see that the image above has a rounded corner effect, but when I use html2canvas to convert the image, I find that the rounded corner effect of the image has not expired.

It looks like the above. After thinking about a lot of solutions, I decided to create a background image with the rounded corner. The background of the center circle is transparent, and then cover the original image with absolute positioning, it is equivalent to a mask.

Of course, the DOM node of the masked image must be under the image with rounded corners, similar

<Div class = "avatar_img fl"> <div class = "avatar_img fl">  <! -- Original image to be rounded -->  <! -- Mask image --> </div>

The generated file is normal.

<Div class = "avatar_img fl"> <div class = "avatar_img fl">  <! -- Original image to be rounded -->  <! -- Mask image --> </div>

The Code is as follows:
<A href = "<a href =" http://www.teaxia.com/wp-content/uploads/2018/01/2.jpg "> http://www.teaxia.com/wp-content/uploads/2018/01/2.jpg "> src =" <a href = "http://www.teaxia.com/wp-content/uploads/2018/01/2-169x300.jpg"> http://www.teaxia.com/wp-content/uploads/2018/01/2-169x300.jpg </ a> "alt =" "width =" 169 "height =" 300 "srcset =" <a href = "http://www.teaxia.com/wp-content/uploads/2018/01/2-169x300.jpg"> http://www.teaxia.com/wp-content/uploads/2018/01/2-169x300.jpg </a> 169 w, <a href = "http://www.teaxia.com/wp-content/uploads/2018/01/2.jpg"> http://www.teaxia.com/wp-content/uploads/2018/01/2.jpg </a> 377 w "sizes =" (max-width: 169px) 100vw, 169px "/> </a>

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.