Html turn those problems encountered with a picture html2canvas

1. Picture cross-domain issues

In the html into a canvas in the picture is converted into an address when canvas.toDataURL ( "image / png")

Encountered error:

Access to image at 'png' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

or

Access to image at 'www.baidu.com/GT/github/hotelAdmin/img/tempalte-top.png' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

The reason given is the picture of the cross-domain contamination canvas, causing the canvas can not export img address

To find ways on the Internet 

Setting:

            useCORS: true, // (cross-domain images related) 
            allowTaint: false, // allow cross-domain (cross-domain correlation pictures

$ ( '# div') the Click (function () {. 
        html2canvas (Template, { 
            onrendered: function (Canvas) { 
              
                    exportCanvasAsPNG (Canvas, 'invoice.png') 
              
            }, 
            useCORS: to true, // (picture cross-domain correlation) 
            allowTaint: false, // permit cross (cross-domain images related) 
            X: 0, 
            Y: window.pageYOffset, 
            windowWidth: document.body.scrollWidth, 
            windowHeight: document.body.scrolHeight, 
        }); 
    })

　　But did not effect

The fundamental picture is chasing cross-domain issues

How to solve cross-domain

1. Set request header 

 

The need to set the image server side, this can not be verified if it works, because we can not get the server said it pass

2. Since the cross-domain, then I Uniform Domain Name on it, and then a little radical to file written directly into the code

   The image transferred to the source file object blob and then () URL.createObjectURL method for converting an address img src available, then draw on the Canvas, in html together and deriving the toDataURL , turn into a picture

How to do it

1. Get the picture source

I have here two pictures is a static picture, does not involve dynamic, so I turned directly online base64 code    online turn base64

2. The cross-domain images turn into blob file object

 

    // file object will convert base64 
    function dataURLtoFile (dataUrl, filename) { 
        var dataurl.split ARR = ( ','); 
        var MIME ARR = [0] .match (/:.? (*); /) [. 1 ]; 
        var = BSTR atoB (ARR [. 1]); 
        var = n-bstr.length; 
        var u8arr new new Uint8Array = (n-); 
        the while (N--) { 
            u8arr [n-] = bstr.charCodeAt (n-); 
        } 
        / / is converted into an object file 
        // return new new File ([u8arr], filename, {type: MIME}); 
        // converted into the blob 
        return new new Blob ([u8arr], {type: MIME}); 
    }

3. The conversion of an object image by blob URL.createObjectURL ( 'the blob image') to the image address assignment on the img src

   $('.top-img').attr('src',URL.createObjectURL(imgfile))

4. drawing canvas, in a given case will not be able to complete canvas repaint the entire html

html2canvas (Template, { 
            onrendered: function (Canvas) { 
                  
                  var imgUrl canvas.toDataURL = ( "Image / PNG"); 
this time can perform the normal method toDataURL 
                   @ deriving image 
                    exportCanvasAsPNG (Canvas, 'invoice.png') 
              
            } , 
            useCORS: to true, // (cross-domain images related) 
            allowTaint: false, // allow cross-domain (cross-domain images related to) 
            the X-: 0, 
            the y-: window.pageYOffset, 
            windowWidth: document.body.scrollWidth, 
            windowHeight: the Document. body.scrolHeight, 
        });

　　Tomorrow continue to write