How can I grab the source of a Javascript dynamically generated image so I can create a download button on mobile browser?

I am using a script qrcode.js to generate a QR-code that I want to download so it can be ‘scanned’ on a mobile phone. The QR-code image is created after the user fills in a form and the data is used to generate the image.

I can get the download button to work on the desktop and on a mobile if the browser runs in ‘Desktop mode’. That mean that on a mobile I have to use: ‘Request Desktop Site’, that is available in Chrome on Android mobile. In regular mode in Chome on Android mobile, however, using tap and hold on the download button downloads the entire HTML file.

To figure out what was going on, I tried to alert() the source of the image after using querySelector to grab it. On the desktop browser and in ‘Desktop mode’ for in Chome on Android mobile, I am able to get the file source printed in the alert box, but in regular mode on the mobile browser, it returns an empty string. Also, although the image still appears on the mobile page, I cannot tap and hold on to it in order to initiate a download. If I use another image, as in the code below, that is not generated by Javascript, I can download it with no issue.

<img src="logo.png" alt="" class="mb-10"/>

This is how the QR-image is generated and how the download button is created:

const form = document.getElementById('generate-form');
const qr = document.getElementById('qrcode');

const onGenerateSubmit = (e) => {
    e.preventDefault();

    clearUI();

    const name = document.getElementById('name').value;
    var radios = document.getElementsByName("svc");
    let reference = service + ' ' + name;
    
    setTimeout(() => {
        // Generate the QR code with qrcode.js
        generateQRCode(reference);

        setTimeout(() => {
            // Grab the src of the QR image
            const saveUrl = qr.querySelector("img").src;
            createSaveBtn(saveUrl);
        }, 1000);
    }, 50);

}

const generateQRCode = (url) => {
    const qrcode = new QRCode('qrcode', {
        text: url,
        width: 300,
        height: 300,
    });
}

const createSaveBtn = (saveUrl) => {
    const link = document.createElement('a');
    link.id = 'save-link';
    alert(saveUrl);
    link.classList = 'bg-red-500 hover:bg-red-700  text-white font-bold py-2 rounded w-1/3 m-auto my-5';
    link.href = saveUrl;
    link.download = 'qrcode';
    link.innerHTML = 'Save Image';
    document.getElementById('generated').appendChild(link);
};

const clearUI = () => {
    qr.innerHTML = '';
    const saveBtn = document.getElementById('save-link');
    if (saveBtn) saveBtn.remove();
}

form.addEventListener('submit', onGenerateSubmit);

Below are the images of the alert box that shows the src of the QR code in the different modes on mobile:

On mobile

On mobile while in Request Desktop Site

Is there a way I can get the src of the dynamically generated image on mobile? Does a browser work differently on a mobile than on a desktop? I have noticed that on other websites, there are certain images that I can’t download with tap and hold as well.

I’m new to Javascript and HTML so any help is very much appreciated. Thank you so much in advanced.