html2canvas Screenshot problems, leading to cross-domain images blank shots

A project years ago, to do a function H5 screenshot sharing, using html2canvas plug screenshot function is achieved, but cross-domain images of life and death does not come out,

 

 After a few days Google Baidu and keep trying, finally found a solution, and experienced a total of two people mentally exhausted pit:

Pits:

　　Cross-domain logo and two-dimensional code sharing all get out,

1, requires HTTP response header to IIS on the server, the most simple and crude way is all set to *, but this security is low, you can set up according to their needs:

access-control-allow-credentials:true
Access-Control-Allow-Headers:*
access-control-allow-origin:*

2, the addition html2canvas useCORS parameter settings:

html2canvas(document.getElementsByClassName('codediv')[0], {
                useCORS: true,
                allowTaint: false
            }).then(function (canvas) {
                
            });

Pit: a two-dimensional code display without displaying the logo when sometimes display brains:

Solution:

1, first need to set up more than two-step

2, is provided crossorigin = "anonymous" img property on the label;

 

 3, need to add parameters (I'm been stuck in this, it has not been) after the img src: