To preface, I am using mapbox to create a map then I use the getCanvas and toDataURL methods to get the image data.

Here is my code to download an image. So far, I am able to download the image properly on my desktop, but on mobile I download the image as file with no extension. I have to manually change the file to a .png then it works.

Is it possible at all to make sure that on mobile the file downloaded is a png?

I have tried using the Image class previously to no avail.

        let dataURL = props.map.getCanvas().toDataURL();
        var download = document.createElement('a')
        download.download = 'map.png'
        download.href = dataURL
        download.target = '_blank'
        download.click();