Javascript heic2any与文件输入

我无法使用输入文件让它为我工作。我知道这段代码使用fetch，应该将文件转换为fetch，但我不知道

heic2any：

fetch("https://alexcorvi.github.io/heic2any/demo/1.heic")
      .then((res) => res.blob())
      .then((blob) => heic2any({
        blob,
        toType:"image/jpeg",
        quality: 0.7
      }))
      .then((conversionResult) => {
    var reader = new window.FileReader();
    reader.readAsDataURL(conversionResult);
    reader.onloadend = function () {
         base64data = reader.result;
         console.log(base64data);
          document.getElementById("target2").innerHTML = '<a download="image.webp" href="'+base64data+'">Download</a>';
          
    }
      })
      .catch((e) => {
        console.log(e);
      });    

fetch（“https://alexcorvi.github.io/heic2any/demo/1.heic")
.然后（（res）=>res.blob（））
.然后（（blob）=>heic2any({
水滴，
toType:“图像/jpeg”，
质量：0.7
}))
。然后（（转换结果）=>{
var reader=new window.FileReader（）；
reader.readAsDataURL（转换结果）；
reader.onloadend=函数（）{
base64data=reader.result；
console.log（base64data）；
document.getElementById（“target2”）.innerHTML=''；
}
})
.catch（（e）=>{
控制台日志（e）；
});    

输入文件：

<input id="image-file" type="file" onchange="SavePhoto(this)" >

<script><!-- comment -->
    function SavePhoto(f) 
{

    let photo = f.files[0];   
}
</script>

功能保存照片（f）
{
让photo=f.files[0]；
}