Off Topic Rendering specific HTML element to PNG Rendering specific HTML element to PNG
2 replies 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? 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. @ EngiN33R: Well, I never seen about C# HTML Renderer. I might check that out (I have knowledge about C#). If I can't get it working, maybe I'll try to use Corel DRAW or Photoshop. Thank you