Wechat applet uses wxml2canvas plug-in to generate some problem records of pictures

Text cannot be bold

css Style add font-weight:bold, But the font of the generated image is not bold . Check the plug-in source code , Find out bold Replaced with 700( If the word weight is not set, it is 400)
terms of settlement ： Here is the source code _drawText The red box position of the method , Direct will 700 Replace with bold, The plug-in can draw the BOLD effect normally .

The drawing results are disordered （ Part of the content is not drawn ）

reason 1： Network picture

First , Domain name of network picture , Must be set in the applet "downloadFile Legitimate domain name " Inside , Otherwise, you can't draw a picture , And cause the image All elements after the element are not drawn （ The plug-in does not report an error ）

secondly , Network pictures need to be downloaded to the cache in advance , Otherwise, it's impossible to draw the picture , And it also causes the following elements not to draw .

terms of settlement ： Use wx.downloadFile Download all pictures in advance , And replace src Cache pictures for src

Last , Recommended at all image Add... To the tag data-delay="1" attribute ,
The advantage of this is , Delay the picture until all text elements are drawn , Even if a picture is drawn incorrectly , It will not cause the following text content to be unable to be drawn , Reduce risk .（ Put the background map in local resources , Don't delay, Otherwise, the text content will be overwritten ）

reason 2： The drawing order is out of order .
The default drawing page of the plug-in has no scroll bar , And only draw the current screen content . If you draw long content , And when the page scrolls , The drawing results will be confused .

After detecting the source code, I found , When sorting inside the plug-in , Using elements top Value as array subscript , Because after the scroll bar , The element at the top of the page top It's a negative number , Negative array subscripts when sorting , Was wrongly ranked at the end , This leads to elements that should have been drawn first , Finally draw , And there is an error coverage problem .

terms of settlement ： In source _sortListByTop In the way , Add the code in the red box , First, traverse the minimum of all elements top value , If it's negative , The reverse is true , And add to top in , This ensures that the array subscript is at least 0, There will be no wrong sort problem .

PS： If top The value has a decimal number , At this time, there will also be problems when the plug-in is used as an array subscript , Please make sure top The value is integer. .

Last , Effect of finished drawing （ There are only methods to draw rounded corner pictures in the plug-in , There is no way to draw rounded rectangles , Too lazy to mend ~）