Hello everyone, I am Wang Dashao. Recently, various companies are showing their annual report of APP, and I have the honor to do the content of our company, so there must be sharing link if there is a report. When sharing posters, I met some problems by using html2Canvas plug-in, so this is to summarize

The problem summary

  1. Html2canvas generated poster clarity problem
  2. Html2canvas cannot generate HTML with canvas elements in a page
  3. Html2canvas does not support some CSS properties

Html2canvas generated poster clarity problem

Without further ado, first cast two changes before:After the changes:It’s pretty clear that there’s been a qualitative change before and after the change so what’s going on? The answer is this:

  • Before the change, we adopted the method of background introduction and introduced image resources through background-image, so it would be unclear when we converted to canvas
  • After the change, we adopted the method of image positioning + hierarchy, directly introduced the image through the IMG tag, and accurately positioned our image into our view through positioning, and displayed it as a specific background effect through hierarchy

So some friends might say, even then it’s not clear? So what should we do?

  1. First of all, what we need to understand is why is it causing this ambiguity
  2. According to the source code analysis, we finally get a Base64 picture in HTML2Canvas, while canvas generates a Base64 picture, which obviously uses Cancanvas. ToDataUrl. Without further ado, look at the document

According to the MDN’s introduction, we can know that the API of the highest quality can only guarantee to 0.92, is it this way, we can improve the quality of the image element to the page, the generated image increases, the effect of equivalent we use time for clarity, we need to do is to improve the page picture, In addition, the HTML to be generated is set to be twice as wide and high before generation, so that the whole page is enlarged by twice. Since the generated HTML is determined by our original width and height, we can manually expand and shrink our images through the transform Scale attribute after generation, so as to achieve a clear effect.

Html2canvas cannot generate HTML with canvas elements in a page

beforeGenerated after

Through the two displays after generation, we can see that canvas has not been accurately generated. So how did we solve that

Yeah, that’s what you think. We also used canvas’s toDataUrl API to generate pictures and render them in HTML documents. In order to avoid visual error, we placed this step before HTML2Canvas for rendering. After generation, we restored the Canvas tag intact

Html2canvas does not support some CSS properties

This can be observed from the canvas picture above. Before generation, there was a frosted glass effect in our HTML, but it was not displayed after generation. The reason is that the original background has been replaced by IMG, so it is not displayed. Dashe wondered whether it was possible to use an element to locate the image for local Gaussian blur. Finally, due to time problems, it was not implemented in detail. Here, I also read some documents of HTML2Canvas and found that such operation was not supported indeed.

Hereby, a little interlude

Gaussian blur

We know that the frosted glass effect is not commonly used in our daily life, but how to do it? At first, I thought the same as everyone, and directly use filter:blur() to achieve blur, but the actual situation is

It’s blurry, but our text is not blurry, and our background is not blurry either, so we make some improvements to the scheme that we useBackdrop – filter: the blur ()Properties.

Then he has the effect we want. Filter is a blurring effect for the current container, and Backdrop is a blurring effect for the content beyond the hierarchy. Then we can use the frothed glass effect more happily