[Front-end] html2canvas generates image blank troubleshooting data:;
Because I wanted to make a sharing image, I used html2canvas. It worked fine at first. I just tested it today and found that the image could not be displayed. After printing, the generated image link becomes data:; . After checking step by step later, I found that the page content was too much, and it could be displayed by deleting a little content. Then I took a closer look at the various parameters of html2canvas and found that it can be improved by adjusting the scale. Summarized as follows:
- Picture cross-domain
You can first check whether the images in the selected dom are cross-domain. If so, you can add the setting useCORS:true. As shown in the picture:
- Too much content.
You can check whether the selected DOM content is too much. If it exceeds a certain range, base64 image encoding generation will fail. To be on the safe side, you can set the scale of html2canvas lower.