dom-to-image包未捕获边框图像

Question

我使用dom- to -image包来捕获一些带有边框图像的元素，除了边框图像之外，所有的元素都被捕获了。请在下面找到我的代码：

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

Answer 1

图像边框可以在转换过程中丢失的css中生成，请尝试在转换后添加样式

domtoimage.toPng(document.getElementById("item_preview")).then(function (dataUrl) {
            var img = new Image();
            img.src = dataUrl;
            //img.style.border = "1px solid black"; // <-- Custom Border or:
            img.style.border = document.getElementById("item_preview").style.border;
            document.body.appendChild(img);
        }).catch(function (error) {
            console.error('oops, something went wrong!', error);
        });

Answer 2

我认为加载图像有延迟，请替换

border-image-source: url('border.png')

至

border-image-source: url('data:image/png;base64,iVBORw0...');

这对我很管用。