htmlToCanvass don't create canvass on safari unless image src is png?

Question

I have the following load image function that loads pics from input, if I load an image that is png works fine on pc and iPhone, however if the image is something else the html to canvass function doesn't return any thing just freezes, any idea what might be causing this issue ?

const loadImage = () => {
    if (window.File && window.FileReader && window.FileList && window.Blob) {
      const input = document.querySelectorAll('input[type=file]')[1] as HTMLInputElement;
          if (input?.files![0]) {
          let reader = new FileReader();
          reader.onload = function (e: any) {  
        setLoaded(e.target.result);
         };
         reader.readAsDataURL(input.files[0]);
       }
  };
  
  // 
  html2canvas(
      document.getElementById('pdfItems')!,
      {
        onclone: function (clonedDoc) {
          // none ! hidden show !!
          clonedDoc.getElementById('pdfItems')!.style.display = 'flex';
        },
        //TO INCREASE QUALITY !!!!!!!!!!
        scale: 2,
      }
   
    ).then((canvas) => {
      alert(canvass);
    });
    
    
// Image div 
   <div style={{backgroundImage: `url(${loaded})`}}></div>