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

Posted 2023-03-05

【中文标题】dom-to-image 仅从 html 生成空白的白色图像

【英文标题】：dom-to-image generates only blank white image from 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());
         
    );

【参考方案1】：

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

【讨论】：

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