html2canvas jsPdf access error for image sourced from firebase

Viewed 331

In my webpage I am sourcing a number of images from Firebase. There is no problem in loading these images from Firebase. As the next step I am trying to make a pdf file with these images. Here is the relevant javascript code from the page:

I have a long for loop, within which I am adding the images:

var probImagelink = document.getElementById("Question");
var qDiv = document.createElement('div');
probImagelink.appendChild(qDiv);
qDiv.id = 'QuestionBank'+listkey[k];

var qimg = document.createElement('img');
qimg.style.width= "100%";
qimg.src = listq[k];
qimg.id = "QuestionImg"+listkey[k];
qDiv.appendChild(qimg);

The array listq contains the urls of the images sourced from Firebase that are loaded.

The pdf creation code is as follows:

var doc = new jsPDF();

html2canvas(document.getElementById('QuestionBank'+listkey[k]), {
    useCORS : true,
    onrendered: function(canvas) {
         var imgData = canvas.toDataURL('image/jpeg');
         doc.addImage(imgData, 'JPEG', 15, 0, 34, 37);
    }
 });

But here is the problem. The first error that I get is:

Access to image at 'https://firebasestorage.googleapis.com/******' from origin 'http://localhost:5000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

The second error that I get is:

Uncaught Error: Supplied Data is not a valid base64-String jsPDF.convertStringToImageData

1 Answers
Related