Forum

> > Off Topic > Rendering specific HTML element to PNG
Forums overviewOff Topic overviewLog in to reply

English Rendering specific HTML element to PNG

2 replies
To the start Previous 1 Next To the start

old Rendering specific HTML element to PNG

MikuAuahDark
User Off Offline

Quote
I want to port web user interface to game which most of it's UI is stored as PNG image. I have problems. How I can render specific HTML element to PNG?

Example: I want to render this RAISED button to PNG with transparent background. I can just render the whole page but I need to edit the rendered image to transparent background. In that case, it can beyond my Photoshop skills.

So, any way I can render specific element in HTML with transparent background?

old Re: Rendering specific HTML element to PNG

EngiN33R
Moderator Off Offline

Quote
Having done some searching, it doesn't look like there's an easy way out. You could use the HTML Renderer C# library (how to) to write a program to do it for you. There also exists a JS library, HTML2Canvas, but it's a little rudimentary - here's the result I got trying to simulate your situation.

Your best bet would probably be to use Photoshop or something similar and simply recreate that UI element as a PNG yourself - perhaps even in vector. You can look at the CSS to match the specifications as closely as possible.
To the start Previous 1 Next To the start
Log in to replyOff Topic overviewForums overview