About how I almost ran away using HTML2Canvas

preface

Recently, we launched a wechat fission activity, in which users generate their own posters and invite other users to help. Because it is in the H5 environment, htm2Canvas is used to generate share posters. As a result, a small number of users gave feedback that posters could not be generated online, there was no response after clicking the button, and there was no error log capture on the alarm platform. After fixing the problem, a series of production environment problems followed and I almost ran away with my bucket.

html2Canvas

Html2Canvas is a mature open source library, which can directly convert DOM to Canvas, eliminating the process of using native Canvas to draw bit by bit.

use

Take vUE as an example

NPM install --save html2canvasCopy the code

Html2Canvas </div> < button@click ="toImg"> </button> </div> </template> <script> import html2canvas from "html2canvas" export default { methods: { toImg() { html2canvas(this.$refs.canvas, {}).then(canvas => { }) } } } </script>Copy the code

Common Configuration Items

parameter	type	The default value	describe
allowTaint	boolean	false	Whether cross-domain images are allowed to contaminate the canvas
useCORS	boolean	false	Whether to load images across domains
backgroundColor	string	#fff	The background color
width	number	The width of the element	The cell
height	number	The element height	The cell
scale	number	window.devicePixelRatio	scaling
scrollX	number	The X-axis scroll position of the element	After generating the X-axis scroll position
scrollY	number	The y scroll position of the element	Generated after the Y-axis scroll position

Html2Canvas draws cross-domain images

First, the online image domain name needs to be configured to allow cross-domain access.

Add crossorigin=”anonymous” to the img tag, and add a timestamp after SRC to prevent caching;

<img crossorigin="true" class="share" :src="src+'? '+new Date().getTime()" >Copy the code

Finally, html2Canvas adds {allowTaint: true,useCORS: true} configuration items. UseCORS: true does the same thing as crossorigin=”anonymous”. If you are interested in adding crossorigin=”anonymous” to an image, you can use this configuration item.

      html2canvas(this.$refs.canvas, {allowTaint: true,useCORS: true,}).then(canvas => {
          let imgUrl = canvas.toDataURL()
      })
Copy the code

Disadvantages: it does not support all CSS properties, see the official documentation for detailsThe document

Troubleshoot problems

Because the error log was not captured, the mainstream models of our project team have also been tested, and the preliminary analysis may be due to the problem of the mobile phone system. Various resources were collected, and the problem was finally reproduced in an ios13.4 system: ———— html2Canvas callback function was not executed.

To solve the problem

Problem 1: html2Canvas in ios13.4.x system does not execute callback in wechat browser

After reviewing various materials, I found a solution in issues: the html2Canvas version needs to be rolled back to 1.0.0-RC.4.

The easiest way to do this is to simply change package.json to “html2Canvas “:” 1.0.0-rC.4 “and then reinstall the dependencies. After repackaging, a look at this problem is really good, think everything is ok, deploy to test and then appear a second problem ————ios14.x version cross domain picture blank

Html2canvas 1.0.0-RC.4 causes that cross-domain images cannot be drawn in ios14.x

Continue to consult information, found a solution to the problem of the second solution, not the old version of THE JS file, there are big guys directly modified the new version of the source code, the callback does not execute the problem to avoid.

Directly download the modified HTML2Canvas. js source code download address into the project tool class directory, the permanent local directory to introduce.

// import html2canvas from '@/utils/html2canvas.Copy the code

Fault 3: the page is refreshed when ios15.1 is generated

The project has been running steadily for a month after the last revision and release. However, after Apple’s new product release conference, we received feedback from users that apple 13 could not generate posters. At that time, the new iPhone was just released, so we could not check relevant information and did not have a test machine in hand. I have to deal with complaints every day. The first thing I did was to use the new phone for debugging. After checking, I found the problem: If the container to be drawn by HTML2Canvas contains tags that can contain text and the font is not set, the system will add font-family by default: -apple-system, system-ui, BlinkMacSystemFont, “Segoe UI”, Roboto, “Helvetica Neue”, Arial, sans-serif; This will cause the page to refresh.

The solution is to set the font for all the labels that need to be drawn.

conclusion

This time exposed some of the more partial problems that html2Canvas will encounter, especially sorted out, I hope others will not have to detour.