Cross Domain images not rendering (No CORS or proxy)

Hi,

Using the following code images are not rendering cross-domain.

html2canvas($(".canvas-surround"), {
        logging: true,
        width: 1920 * getScale(),
        height: 1080 * getScale(),
        useCORS: false,
        onrendered: function(canvas) {

            var bottomCtx = canvas.getContext("2d");
            var topCtx = canvas.getContext("2d");
            var bData = bottomCtx.getImageData(0, 0, canvas.width, canvas.height);
            var tData = topCtx.getImageData(0, 0, canvas.width, canvas.height);

            var merged = mergeData(bData, tData);

            bottomCtx.putImageData(merged, 0, 0);

            var newImg = canvas.toDataURL("image/png");
            console.log(newImg);
            var blob = b64toBlob(newImg, "image/png");
            console.log(blob);

            var blobUrl = URL.createObjectURL(blob);

            console.log(blobUrl);

            downloadURI(blobUrl);
        }
    });

Whilst trying to grab images from “http://www.thermmark.co.uk” from “http://www.playgroundmarkingsdirect.co.uk” the images would not render.

When I moved the code over to the “http://www.thermmark.co.uk” website the images rendered (I own both domains)

Any ideas?

[gauravmishra24]

Hi Rookev,

You can do so by passing one of the option in html2canvas function. And trust me this will surely work 😃

html2canvas($(‘#div_pdf’)[0], { useCORS: true, //By passing this option in function Cross origin images will be rendered properly in the downloaded version of the PDF onrendered: function (canvas) { canvasToImageSuccess(canvas); } }); For further info you can have a look at the documentation of the html2canvas library on below URL-: https://html2canvas.hertzen.com/documentation.html

[akaJes]

Maybe You should use useCORS ptoperty as true, it intended for crossdomained web content