IMGKit convert HTML to PNG of a specific part of the HTML

Question

I haven't been able to find this in the docs, so that's why I am asking here.

Is it possible to tell IMGKit to convert a specific part of the HTML? I just want the PNG of a specific container.

So, if my HTML markup looks like this:

<html>
<head><title>Test</title></head>
<body>
<div class='container'>
Test
</div>
</body>
</html>

Just take a screenshot of the container div?

You ever find an answer to this? – xeroshogun Apr 17 '15 at 02:18 — xeroshogun, Apr 17 '15 at 02:18

score 0 · Answer 1 · answered Sep 16 '15 at 15:52

I can think of a couple options here:

You can create a new view that only contains the element you wish to convert to an image. If you want to avoid duplicating code you can even render this new view into the existing one as a partial.
According to the usage sample on GitHub IMGKit accepts a string with HTML as a first argument so you can parse that element out of your view and pass that. Noting that if there are any external scripts or stylesheets you add them with the following code:

Add Styles and Scripts:

kit.stylesheets << '/path/to/css/file'    
kit.javascripts << '/path/to/js/file'

1 Answers1