Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

dom-to-image package is not capturing border-image

I'm using the dom-to-image package to capture some elements with border-image, and everything is getting captured, excepts the border image. Please find below my code:

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);
    });
like image 297
Jack Glow Avatar asked Nov 06 '22 11:11

Jack Glow


1 Answers

The Image border can be generated with css where it is lost in conversion, try adding style after conversion

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);
        });
like image 115
gmazoni Avatar answered Nov 12 '22 11:11

gmazoni