html2canvas - The solution to the blank screenshot caused by the image cross-domain

1. Back-end support: If the image is an address on the cdn, and the image is allowed to cross-domain, the setting in the header header should be

 

　　Access-Control-Allow-Origin:  *

 

2. Front-end configuration

1      var opts = {
 2            scale: scale, // added scale parameter 
3            canvas: canvas, // custom canvas 
4            logging: false , // log switch, easy to view the internal execution process of html2canvas 
5            width: width, // dom original width 
6            height: height,
 7            useCORS: true  // [Important] Enable cross-domain configuration 
8        };

use

let shareContent = document.getElementById('XXX');

html2canvas(shareContent,opts).then(function(canvas) {
   //... 
})