Printing node not currently attached to DOM about dom-to-image HOT 9 CLOSED

I found a solution to this problem. Here is my code in-case anyone else wants to do this:

// The element being rendered has to be added to the document for DomToImage to work.
// We don't want to show it on-screen so we position it off-screen.
let position = exportElement.style.position;
let left = exportElement.style.left;
exportElement.style.position = 'absolute';
exportElement.style.left = '-9999px';
document.body.appendChild(exportElement);

let blob = await DomToImage.toBlob(exportElement, {
  style: {
    // Revert the off-screen positioning
    position: position,
    left: left
  }
});

document.body.removeChild(exportElement);

I needed this as we wanted to modify the HTML of the image differently to how the built in filter works. I cloned the element, made my modifications and then passed the clone to DomToImage.

from dom-to-image.

I found a solution to this problem. Here is my code in-case anyone else wants to do this:

// The element being rendered has to be added to the document for DomToImage to work.
// We don't want to show it on-screen so we position it off-screen.
let position = exportElement.style.position;
let left = exportElement.style.left;
exportElement.style.position = 'absolute';
exportElement.style.left = '-9999px';
document.body.appendChild(exportElement);

let blob = await DomToImage.toBlob(exportElement, {
  style: {
    // Revert the off-screen positioning
    position: position,
    left: left
  }
});

document.body.removeChild(exportElement);

I needed this as we wanted to modify the HTML of the image differently to how the built in filter works. I cloned the element, made my modifications and then passed the clone to DomToImage.

Actually you can even elegantly improve it by creating a parent that is already offset on document creation, append the exportElement to the hidden parent then do your DomToImage, this way you will write less code offsetting and resetting the exportElement

from dom-to-image.

Hi, sorry for late reply. Could you please put together a jsfiddle?

from dom-to-image.

Hi, I have the same problem.

When I try to render a node not attached to any element of the tree I get a generic error in the catch clause.

If I try to attach the node on the DOM tree, but I set the visibility to 'hidden' the resulting image is empty. Is there a way to just render an html parsed code into a png image?

Thanks! Great job by the way!

from dom-to-image.

Hi. Actually I've never tried to render such a node. The general use case I've wrote this ilb for is that you have a visible part of the page you want to export as image.

It might be that the way this lib works (it gets calculated styles for all the children of the node recursively) is relying on the fact that the node got rendered by the browser at least once. @croll83 I think when you say visibility: hidden on the node that you want to render, then this property (like all calculated styles) is applied to this node when rendering. Maybe you can try to turn this off by using style option, like domtoimage.toPng(node, {style: {visibility: visible}}), but I'm not sure whether this will work.

Rendering HTML string to image would be a great feature, I wonder if it is possible to add with the current implementation, I'll have to think about it.

from dom-to-image.

Already tested with the option but it still don't work. I solved by appending the child to an element of the page, calling the .toBlob method on that node and removing the child on the callback. This will show the element for less than a second and remove it. This is not very elegant, but it's the max I was able to do.

I tryied to debug the code but I lost in the Promises so I was not able to find the error source. it's a very generic error. If I could help you contact me and tell me how :)

BTW I have another problem... I'm not able to apply font on the image. Even if I define standard font like verdana in the style element of the main div it's not applied. Any idea about?

this is the code i'm using:

var htmlCard = '

var cardDiv = document.createElement('div');

cardDiv.innerHTML = htmlCard;

document.getElementByID('canvas').appendChild(cardDiv);

domtoimage.toBlob(canvas, {
style: {
'font-family': 'Verdana'
}
})
.then(function (blob) {
window.saveAs(blob, 'card.png');
canvas.removeChild(cardDiv)
})
.catch(function (error) {
console.error('oops, something went wrong!', error);
});

from dom-to-image.

html child definition removed for html tags...
var htmlCard = '<div style="width:660px; color: #000000; background-color: white;line-height:115%; @font-face{font-family:\'Raleway\';font-style:normal;font-weight:400;src:local(\'Raleway\'),local(\'Raleway-Regular\'),url(https://fonts.gstatic.com/s/raleway/v11/yQiAaD56cjx1AooMTSghGfY6323mHUZFJMgTvxaG2iE.woff2) format(\'woff2\');unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF;}; @font-face{font-family:\'Raleway\';font-style:normal;font-weight:400;src:local(\'Raleway\'),local(\'Raleway-Regular\'),url(https://fonts.gstatic.com/s/raleway/v11/0dTEPzkLWceF7z0koJaX1A.woff2)format(\'woff2\');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215,U+E0FF,U+EFFD,U+F000;}; font-family: \'Raleway\'"><div style="width:660px; text-align: center; margin: 0px 30px; padding-bottom: 0px">SOME CONTENT HERE</div>';

from dom-to-image.

probably can't be done with current impl

from dom-to-image.

I found a solution to this problem. Here is my code in-case anyone else wants to do this:

// The element being rendered has to be added to the document for DomToImage to work.
// We don't want to show it on-screen so we position it off-screen.
let position = exportElement.style.position;
let left = exportElement.style.left;
exportElement.style.position = 'absolute';
exportElement.style.left = '-9999px';
document.body.appendChild(exportElement);

let blob = await DomToImage.toBlob(exportElement, {
  style: {
    // Revert the off-screen positioning
    position: position,
    left: left
  }
});

document.body.removeChild(exportElement);

I needed this as we wanted to modify the HTML of the image differently to how the built in filter works. I cloned the element, made my modifications and then passed the clone to DomToImage.

I guess things must've changed because after setting to absolute positioning, my image renders transparency.

from dom-to-image.