使用 DOM to Image 时无法获得良好的图像质量

如何解决使用 DOM to Image 时无法获得良好的图像质量

我正在开发使用 DOM to image 库和 FileSaver.JS 保存图像的模因编辑器网络应用。

使用PC屏幕保存图像有点好，但使用手机屏幕保存图像时显示的图像是像素化图像。

这是我需要保存的 div：

       <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>

此外，这是我保存图像的函数的代码：

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');
});

}

此外，这是我的模因部分的 CSS 代码：

    #memeWords{

    font-size: 25px;
}

#theUserMeme{


    background-color: white;
}

可能是什么问题？为什么会发生？如何解决？