htm2canvas压扁文本而不渲染已更改的背景图像

Question

当页面加载时，我有一个配置了背景图像的div。它包含两个p元素，用于覆盖图像顶部和底部的文本，如模因。我有一些可以点击的图像，div的背景图像会改变。这很好。

html2canvas始终呈现原始的硬编码背景图像，无论当前为背景配置什么图像。当在背景图像属性中更新新图像时，html2canvas始终解析/呈现我在CSS中的默认图像

另一个问题是返回的画布似乎是压缩的。文本被压扁并重叠。

当调用html2canvas时，我删除div中的p元素，因为它在生成的画布上导致了空格问题。然后我将画布附加到div。它工作正常，除了它没有解析正确的图像和正在压缩的文本。

这是我改变背景图片的方式。我使用event.target来获取图像。这似乎有效，因为当我触发事件时背景图像会发生变化。

function changeImage(target) {
    var sheet = document.styleSheets[0];
    var rules = sheet.cssRules || sheet.rules;
    rules[5].style.backgroundImage = "url(" + target.src + ")";
}

以下是我生成画布的方法。 meme div包含两个p元素。我删除它们并将画布附加到div。我希望没有什么可以改变，除了div现在是一个可下载的图像，因为画布。

function generateMeme(){
    html2canvas(document.getElementById('meme'), {scale: 1}).then(function(canvas) {
            document.getElementById('generate').disabled = true;
            document.getElementById('top_text').value = ""
            document.getElementById('top_text').disabled = true;
            document.getElementById('bottom_text').value = ""
            document.getElementById('bottom_text').disabled = true;
            var meme = document.getElementById('meme');
            meme.removeChild(meme.firstElementChild);
            meme.removeChild(meme.firstElementChild);
            meme.appendChild(canvas);
    })
}

当我创建画布时，质量会有所下降。图片变得有点模糊。但文本问题确实很明显;并且如果它被改变了，显然会使用错误的图片。

如果需要更多代码来帮助解决此问题，或者您需要查看我的CSS，请与我们联系。