3

I got a HTML file. and I want to capture certain div as a image.

for instance,

    <!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>

when I access with jQuery I can get css and contents(with selector + css, selector + text()/val()). However what I wanted is store certain div as an Image.

==> to summarize, I want make only .first part as an image.

I knew if I use canvas element, I can store as byte stream. But I can not use canvas for this time.

Is there any way I can store such data as a image?

-- P.S

For additional information, in fact, I am trying to store jsPlumb flowchart. There are some samples in web which can store and load via JSON. However I have to load certain chart in different page, storing as an image could be a better way. Thanks for your awesome answer :D

captainsac
  • 2,484
  • 3
  • 27
  • 48
Juneyoung Oh
  • 7,318
  • 16
  • 73
  • 121
  • 1
    Why you can't use Canvas to generate image to it? – Justinas Jun 03 '15 at 07:03
  • take a look at this article [Programatically create image from web-page or a single DIV](http://stackoverflow.com/questions/8745467/programatically-create-image-from-web-page-or-a-single-div) – Gonsalo Sousa Jun 03 '15 at 07:06
  • Sounds like you're attempting the most difficult solution (Screenshot, without canvas) and working backwards. You should try jsPlumb export/load as that *has to be* the easiest path – CodingIntrigue Jun 03 '15 at 07:13
  • Thanks. Yeah I know it is difficult solution, however when I store data, I just store data as json string. So the problem is when I get data, it is nothing but just json string which contains only relation and position informations. To display in WYSWYG style, only thing in my head is capture as an image. Anyway Thanks for links. I will read those from now on :D – Juneyoung Oh Jun 03 '15 at 07:17

0 Answers0