-
Notifications
You must be signed in to change notification settings - Fork 1.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Printing node not currently attached to DOM #36
Comments
Hi, sorry for late reply. Could you please put together a jsfiddle? |
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! |
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 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. |
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 = ' SOME CONTENT HERE var cardDiv = document.createElement('div'); cardDiv.innerHTML = htmlCard; document.getElementByID('canvas').appendChild(cardDiv); domtoimage.toBlob(canvas, { |
html child definition removed for html tags... |
probably can't be done with current impl |
I found a solution to this problem. Here is my code in-case anyone else wants to do this:
I needed this as we wanted to modify the HTML of the image differently to how the built in |
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 |
I guess things must've changed because after setting to absolute positioning, my image renders transparency. |
I have got your excellent module working when I am printing an element found by its Id (as per your documentation) however I have a requirement to print HTML provided to me by an external service.
My attempt currently looks like this:
The behaviour I am seeing is... nothing happens; it doesn't even hit my "catch".
I've had a look through the code and can't see anything obvious requiring the html passed into the .toPng(...) function be attached to the DOM however if I embed the HTML in my DOM and pass an Id as your docs it does work?
Have you got any ideas on this? I cannot easily embed the HTML into the DOM for every case.
The text was updated successfully, but these errors were encountered: