Not able to print image getting from firebase storage into pdf file using html2canvas in web javascript

Question

I am using html2canvas to print a web page into PDF file. The webpage is designed like a profile page with the data getting from the FireStore and image from Firebase storage. When i click on the export option in my webpage the pdf file is downloading with the data only. The profile image is not print in that pdf file. The image is in input type attribute because i have to change that image based user intrest.

Can anybody help me out...

here is what i wrote for pdf file downloading.

$('#button_id').click(function () { 

      html2canvas(document.querySelector("#div_id")).then(canvas => {
        var imgData = canvas.toDataURL('image/png');        
        var doc = new jsPDF('p', 'mm');
        var width = doc.internal.pageSize.width;    
        var height = doc.internal.pageSize.height;
        doc.addImage(imgData, 'PNG', 1, 1, width, 200);
        doc.save('Profile.pdf');
      });

});

Answer 1

You need to make sure that your image is from the sameorigin as mentioned on the "Limitations" section of html2canvas documentation

To avoid that, you need to configure a proxy to get around content policy restrictions.