couldn't get a good image quality when used DOM to Image

Question

I'm working on a meme editor web app using DOM to image library and FileSaver.JS to save the image.

Saving the image using the PC screen is somewhat good, but when it's saved using the phone screen the image that shows up is a pixelated image.

Here is the div that I need to save:

       <div class="col-md-6">

            <div id="theUserMeme">

                <div class="row">
    
                    <p id="memeWords">
                        People struggles with making memes for free <br>
                        Instant Memes:
                    </p>
    
                </div>
    
                <div class="row">
                    <img id = "memeImage" src="images/init meme.jpg">
                </div>
    
            </div>
    

        </div>

Also, here is my code for the function that saves the image:

function generateMeme(){

var options = {
    quality: 1,
};

var alertMsg = "*********** Please Read *********** \n";
alertMsg += "Image must be saved in your device \n";
alertMsg += "If you didn't get the image that you want try again, otherwise, feel free to get in touch with us \n";
alertMsg += "*********** Thanks for reading ***********";

domtoimage.toBlob(document.getElementById('theUserMeme'), options)
.then(function (blob) {
    
    alert(alertMsg);
    window.saveAs(blob, 'instant meme.jpeg');
});

}

Also, here is my CSS code for the parts of the meme:

    #memeWords{

    font-size: 25px;
}

#theUserMeme{


    background-color: white;
}

What the issue could be? Why it is happening? How to fix it?