html2canvas: 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?

About this issue

Original URL
State: closed
Created 9 years ago
Comments: 26 (3 by maintainers)

Most upvoted comments

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

+14

gauravmishra24 on Mar 17, 2017

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

+14

akaJes on May 21, 2015

Using useCORS and set img attribute crossOrigin:anonymous

iHadDream on Jul 17, 2019

Hi @gauravmishra24, unfortunately this does not work. The problem is that I want to include images from a server where the server has the flag

Access-Control-Allow-Origin: *

not set

😦

Rookev on Mar 17, 2017

{ useCORS: false, allowTaint: true } this is worked for me

DanyRupes on Oct 15, 2020

I solved this problem by adding proxy: ( image src )option in html2canvas. Now your image is also included in pdf

.ts

download() { var data = document.getElementById(‘view-eob’); html2canvas(data, { proxy: this.eobDetail.member.parentCompany.logo }) .then(canvas => { var imgWidth = 208; var imgHeight = canvas.height * imgWidth / canvas.width; const contentDataURL = canvas.toDataURL(‘image/png’) let pdf = new jsPDF(‘p’, ‘mm’, ‘a4’); var position = 0; pdf.addImage(contentDataURL, ‘PNG’, 0, position, imgWidth, imgHeight) pdf.save(${this.eobDetail.episode.name}-EOB.pdf); }); }

.html

sanjilshakya on Mar 30, 2021

This issue has been automatically closed because there has been no response to our request for more information from the original author. With only the information that is currently in the issue, we don’t have enough information to take action. Please reach out if you have or find the answers we need so that we can investigate further.

no-response[bot] on Dec 12, 2017

Hi @Cristy94,

I am fetching the images from CMS(Contentful) in my HTML and then trying to generate PDF of that HTML. But in the generated PDF, images are missing.(seems to be an issue of cross origin). Please suggest me how can i get rid of this issues. Below is my code-:

function downloadPDF() { var canvasToImage = function(canvas){ var img = new Image(); var dataURL = canvas.toDataURL(‘image/png’); img.crossOrigin = “Anonymous”; img.src = dataURL; return img; };

var canvasShiftImage = function(oldCanvas,shiftAmt){ shiftAmt = parseInt(shiftAmt) || 0; if(!shiftAmt){ return oldCanvas; }

var newCanvas = document.createElement(‘canvas’); newCanvas.height = oldCanvas.height - shiftAmt; newCanvas.width = oldCanvas.width; var ctx = newCanvas.getContext(‘2d’); ctx.mozImageSmoothingEnabled = false; ctx.webkitImageSmoothingEnabled = false; ctx.msImageSmoothingEnabled = false; ctx.imageSmoothingEnabled = false;

var img = canvasToImage(oldCanvas); ctx.drawImage(img,0, shiftAmt, img.width, img.height, 0, 0, img.width, img.height);

return newCanvas; };

var canvasToImageSuccess = function(canvas){ var pdf = new jsPDF(‘l’,‘px’), pdfInternals = pdf.internal, pdfPageSize = pdfInternals.pageSize, pdfScaleFactor = pdfInternals.scaleFactor, pdfPageWidth = pdfPageSize.width, pdfPageHeight = pdfPageSize.height, totalPdfHeight = 0, htmlPageHeight = canvas.height, htmlScaleFactor = canvas.width / (pdfPageWidth * pdfScaleFactor), safetyNet = 0;

while(totalPdfHeight < htmlPageHeight && safetyNet < 15){ var newCanvas = canvasShiftImage(canvas, totalPdfHeight); pdf.addImage(newCanvas, ‘png’, 0, 0, pdfPageWidth, 0, null, ‘NONE’); // var alias = Math.random().toString(35); // pdf.addImage(newCanvas, 0, 0, pdfPageWidth, 0, ‘png’, alias, ‘NONE’);

totalPdfHeight += (pdfPageHeight * pdfScaleFactor * htmlScaleFactor);

if(totalPdfHeight < htmlPageHeight){ pdf.addPage(); } safetyNet++; }

var pageName = document.location.pathname.match(/[^/]+$/)[0]; pdf.save(pageName + ‘.pdf’); };

html2canvas($(‘body’)[0], { onrendered: function(canvas){ canvasToImageSuccess(canvas); } }); }

gauravmishra24 on Dec 28, 2016

Hi,

Is there any fix for this? Even with useCORS set to true, images are not getting downloaded. Still get the cross-origin error as mentioned above.

Also, not sure about Cristy94’s solution in distributed html2Canvas.js file. Even after changing code in distributed file, as per https://github.com/niklasvh/html2canvas/pull/554/commits/87d44359be73075ba4d5f36d6e1c8b88b7444402 it doesn’t work either.

For the other alternative, with proxy settings, is there any solution for angular 2 application? Current site (https://github.com/niklasvh/html2canvas/wiki/Proxies) list doesn’t have it!

braino15 on May 15, 2017