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