dom-to-image 仅从 html 生成空白的白色图像答案

【问题标题】：dom-to-image generates only blank white image from htmldom-to-image 仅从 html 生成空白的白色图像
【发布时间】：2021-12-17 03:37:03
【问题描述】：

我有一个包含 id='cart' 的 div 元素的页面，我希望能够截取这个 html 元素的屏幕截图。我使用 html2canvas 并且效果很好（代码如下），但是“渲染”速度很慢，所以我尝试了 dom-to-image 库来解决html2canvas 的这个缓慢渲染，我检查了这个库，它适用于许多人，但对我来说我无法让它工作，它总是生成空白图像。 p>

这是我用于 dom-to-image 的代码 sn-p：

var cart = document.getElementById('cart')
    domtoimage.toPng(cart)
    .then(function (dataUrl) {
        var img = new Image();
        img.src = dataUrl;                               
        document.getElementById('test').appendChild(img);
    }).catch(function(error) {
        console.error('oops, something went wrong!', error);
    });

我用于 html2canvas 的代码（工作）：

    $('#cart').html2canvas({
         background :'#0A4361',
         color: '#cce3ff',
         onrendered: function (newCanvas) {
            $('#test img').attr('src',newCanvas.toDataURL());
         }
    });

【问题讨论】：

标签： javascript html image canvas rendering

【解决方案1】：

我对@987654321@ 进行了测试，它似乎工作正常，但有点模糊

【讨论】：

这作为评论会更好，因为它并不能真正回答问题。