nickswope
commented
6 years ago Here's a reproducible example: https://jsfiddle.net/x36a9oz2/6/
The first implementation works, the second does not. The only difference is the second one runs .cloneNode(true) on the node as it is passed into toPng
Looking at the source code, I don't understand why this is happening. cloneNode is used in a very similar way here, so I'm not sure why it doesn't work if the node is cloned prior to passing it in.
This also happens if you just try to create an element using document.createElement and pass that in. It's like the node has to be actually rendered into the DOM tree before this package works. Does anyone have an idea of why this is the case?
iamtekeste
MSCAU
amit-sharechat
FA5I
AlexNecula
Use case: description, code
Cloned DOM node will not render a png.
In this case
var node = $btn.closest('.component-graph-container').find('.graph')[0];node will render a png. in this case using .clone()let node = $btn.closest('.component-graph-container').clone();will export a png but will be empty.I'm not quite sure what is going on - it is necessary in my case to clone the original DOM element to make changes without mutating the original data. The clone will console.log with the expected dom elements.
I also tried creating a new element and appending the clone to that and passing that to domtoimage but had the same results as the clone iteself.
Expected behavior
Cloned DOM elements will render the same as original elements
Actual behavior (stack traces, console logs etc)
PNG is created but when opens alerts "[PNG] could not be opened because it is empty."
Library version
2.5.2
Browsers