CODEWITHSUNDEEP
javascriptjquerysafarijspdfhtml2canvas
AKNair
AKNair

Reputation: 1587

HTML2Canvas not rendering image in Safari browser

I read other answers which told that images will render when we host it in the server. In my case I have the images coming dynamically from server. Its working perfect in Chrome and Firefox but not in Safari. Here is my code using JsPDF and HTML2Canvas:

$(document).on('click', '#download_pdf', function(){
  $('.hide-pdf').hide();
  html2canvas(document.body,{
    useCORS: true,
    logging:true,
    onrendered:function(canvas){
      $('.loading-wrap').hide();
      var img=canvas.toDataURL("image/png");
      var imgData = canvas.toDataURL('image/png');
      var imgWidth = 210;
      var pageHeight = 295;
      var imgHeight = canvas.height * imgWidth / canvas.width;
      var heightLeft = imgHeight;

      var doc = new jsPDF('p', 'mm');
      var position = 0;

      doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
      heightLeft -= pageHeight;

      while (heightLeft >= 0) {
        position = heightLeft - imgHeight;
        doc.addPage();
        doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
        heightLeft -= pageHeight;
      }
      doc.save('bulldata.pdf');
    }
  }
  );
  $('.hide-pdf').show();
}
);

Can anyone help me to check why images are not rendering only in Safari browser.

Upvotes: 1

Views: 4838

Answers (1)

Kazuki Hayakawa
Kazuki Hayakawa

Reputation: 11

I'm also dealing with the same issue. I think that the problem might be caused by CORS option. Basically it works well without CORS option even though Safari.

https://helperbyte.com/questions/277332/as-safari-to-make-it-work-with-cors-html2canvas-correctly

Upvotes: 1

Related Questions