How to generate image from HTML tag?

I have an HTML file. and I want to capture a specific div as an image.

eg,

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset='utf-8'>
    		<title>Capture Image</title>
    		<style>
    			.first {
    				background-color: green;
    			}
    
    			.second {
    				background-color: blue;
    			}
    		</style>
    	</head>
    	<body>
    		<div class='first' style='width: 100px;'>
    			This is first
    		</div>
    		<div class='second' style='width: 200px;'>
    			And this is second
    		</div>
    	</body>
    </html> 
      

Run codeHide result


when i access with jQuery i can get css and content (with selector + css, selector + text () / val ()). However, what I wanted was to store a specific div as an Image.

==> to summarize, I only want to render the part .first

as an image.

I knew that if I use a canvas element, I can store it as a stream of bytes. But I cannot use canvas for this time.

Can such data be stored as an image?

- PS

For more information, in fact, I'm trying to keep the jsPlumb flowchart. There are several samples on the internet that can be stored and loaded via JSON. However, I have to load a specific diagram on a different page as saving the image might be the best way. Thanks for your great answer: D

+3


source to share