1

我正在开发一个使用DOM 到图像库和FileSaver.JS来保存图像的 meme 编辑器 Web 应用程序。

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

}

此外,这是我的部分 meme 的 CSS 代码:

    #memeWords{

    font-size: 25px;
}

#theUserMeme{


    background-color: white;
}

可能是什么问题?为什么会这样?如何解决?

4

0 回答 0