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);
});
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);
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With