How do I make html-to-image to read images on IOS devices

Question

I have been working on a function to download div as an image using html-to-image library. It works well on android phone, but using IOS phones, it only downloads the text and skips the images. Please How do I address this ?

Here is my download function for IOS.

async function IosDownloadImages(){
    try{
        let dataUrl = await htmlToImage.toJpeg(downloadable.current);
        setTimeout(function(){
            console.log(dataUrl)
            setDownloadStage(86);
            const U = document.createElement('a');
            let ran =  randomNumberInRange(0,999);
            U.download = "Image"+ran;
            setDownloadStage(90);
            U.href = dataUrl;
            U.click();
            return "success";
        },2500);
    }catch(e){
        return e;
    }
}

Answer 1

Try this :

async function IosDownloadImages(){
try{
    let blob = await Promise.all([
        htmlToImage.toBlob(downloadable.current),
        htmlToImage.toBlob(downloadable.current)
    ]).then((res)=>res[1] as Blob);        
    
    setDownloadStage(86);

    const url = window.URL.createObjectURL(blob)
    let ran =  randomNumberInRange(0,999);
    
    
    setDownloadStage(90);
    
    const link = document.createElement('a');
    link.href = url;
    link.download = "Image"+ran;
    link.click();
    

    return "success";
    
}catch(e){
    return e;
}