In the function of downloading comparison pictures, because of the need for rapid iteration, the project uses the plug-in HTML2Canvas, which causes problems such as the inconsistency of element text position, the dislocation of images and the inability to load images. Look at the policy drawn on canvas: Use same-origin policy mode.

1. The image cannot be loaded:

  • Scene: When the CH is opened
  • With the Rome developer tool, the images are displayed normally. After closing, image loading failed, open console, prompt

This is an online download

Offline download diagram

Cross-domain error, and the error occurred in the HTML2Canvas source code. So it is the image cross-domain that causes when HTML2Canvas fails to draw the image

  • Html2canvas provides the cross-domain userCORS:true configuration, but this operation is not successful.

    • 1. Through further reading the source code, it is found that HTML2Canvas will copy the original DOM before HTML is converted to canvas, and then render. Img does not cross domain when rendering in the browser, but when using iframe in the plug-in, the same origin policy will be triggered. In this case, html2Canvas img image get network image rendering, the image cross domain, so the configuration item can not be reached here, the error will be reported, resulting in the image loading failure.

    • 2, based on this condition, know that the img tag has crossorigin attribute, and add crossorigin= “anonymous”, because this attribute requires that the back end also be set to allow cross-domain. So in case the backend service has been set to allow cross-domain, I thought it had taken effect. Once on the line, or occasionally pictures (some pictures) failed to load, then by looking up the data, found that pictures this static file sometimes downloaded through CDN, so it is equivalent to the use of cache. So just using the cache (the same image as before) will fail to load.

    • So adding a timestamp to the img path solves this problem perfectly!

2, the element text position is not uniform:

  • Scene:

When named Lisa, it can be seen from the picture that the same height of the picture and the male student’s height is different (Lisa’s foot exceeds the bottom line). After consulting data, we know that the baseline of Chinese and English parsing is different when drawing canvas, and then we solve this problem by setting line-hight

3. Picture dislocation:

  • Scene: When an image is drawn using html2Canvas, it works properly locally. When downloaded online, the character of the image will be moved down 2n

    Image:

    This is an online download

    Offline download diagram

  • Problem analysis: Through looking at the source code, I learned that the plug-in just copied the DOM on one side, and then created a canvas and analyzed it according to the DOM. At first, I thought it was an online case, because the scroll bar caused the image dislocation (the online case was the edge dislocation or incomplete, which was solved by configuring scrollX/scrollY). However, the configuration still does not take effect

  • After checking the official documentation, I found that the features update was actually about CSS property support, so I went to the docs folder

CSS properties are not fully supported in plugins, and some of them cannot be compiled

At this point I went to another featurely.md file to search for CSS properties that the project uses that are not supported in the plugin!! The transition and cursor properties are not supported. The transition and CURSOR properties are not supported. The transition and CURSOR properties are not supported. Successfully solved a bug that had been bothering me for two days