title: How do you convert an html div to image and then save as gif or png?
body: <p>I have tried figuring out a multitude of coded div to image methods on stackoverflow and across the internet. The codes aren't working for me, because none of methods are exactly what I need and I'm screwing up the code with my modifications to fit what I need.</p>
  
  <p>Anyway, a few minutes ago I found someone who is actually applying the code to divs that are set up like mine. Please take a look at his/her tool (it's what I am doing just with a few more images):</p>
  
  <p><a href="http://kpomservices.com/html5canvas/indexsucc.html" rel="noreferrer">http://kpomservices.com/html5canvas/indexsucc.html</a></p>
  
  <p>and his/her blueprint (source file):</p>
  
  <p>view-source:<a href="http://kpomservices.com/html5canvas/indexsucc.html" rel="noreferrer">http://kpomservices.com/html5canvas/indexsucc.html</a></p>
  
  <p>This is what I did:</p>
  
  <ol>
  <li><p>I copied the scripts from the source file (found after <code>&lt;/body&gt;</code> tag):</p>
  
  <p><code>&lt;script src="js/html2canvas.js"&gt;&lt;/script&gt;
     &lt;script src="js/base64.js"&gt;&lt;/script&gt;
     &lt;script src="js/canvas2image.js"&gt;&lt;/script&gt;
     &lt;script type="text/javascript" src="js/jquery-1.4.2.min.js"&gt;&lt;/script&gt;</code></p></li>
  <li><p>I pasted it into my header file above the <code>&lt;/head&gt;</code>.</p></li>
  <li>I replaced all <code>src=""</code> with complete urls (they aren't hosted on my servers yet, because I'm testing to see if this will even work for me first).</li>
  <li><p>I copied the function script from <a href="http://kpomservices.com/HTML_to_Canvas.php" rel="noreferrer">http://kpomservices.com/HTML_to_Canvas.php</a>:</p>
  
  <pre><code>function convert() {
                  dom = document.getElementById('watch');
  
                  // execute the html2canvas script
                  var script,
                  $this = this,
                  options = this.options,
                  runH2c = function(){
                      try {
                          var canvas =     window.html2canvas([ document.getElementById('watch') ], {
                              onrendered: function( canvas ) {
  
                              /*
                              canvas is the actual canvas element,
                              to append it to the page call for example
                              */
                              window.open(canvas.toDataURL());
                              //document.body.appendChild( canvas );
                              }
                          });
                      } catch( e ) {
                          $this.h2cDone = true;
                          log("Error in html2canvas: " + e.message);
                      }
                  };
  
                  if ( window.html2canvas === undefined &amp;&amp; script === undefined ) {
                  } else {.
                      // html2canvas already loaded, just run it then
                      runH2c();
                  }
              }
  </code></pre></li>
  <li><p>I pasted it, as is, between <code>&lt;script&gt;&lt;/script&gt;</code> tags in the header file.</p></li>
  <li><p>I replaced both (2) instances <code>document.getElementById('watch')</code> with my div id name:
  <code>document.getElementById('captme')</code>.</p></li>
  <li><p>I copied and pasted the displaybox styling from the source file and pasted it before the <code>&lt;/head&gt;</code> in header file (I also tried adding it to the css file only, but that didn't work, either):</p>
  
  <pre><code>&lt;style&gt;
  #displaybox {
  z-index: 10000;
  filter: alpha(opacity=50); /*older IE*/
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE */
  -moz-opacity: .50; /*older Mozilla*/
  -khtml-opacity: 0.5;   /*older Safari*/
  opacity: 0.5;   /*supported by current Mozivalidate-textlla, Safari, and Opera*/
  background-color:#000000;
  position:fixed; top:0px; left:0px; width:100%; height:100%; color:#FFFFFF; text-align:center; vertical-align:middle;
  }
  &lt;/style&gt;
  </code></pre></li>
  </ol>
  
  <p>8)  I copied and pasted just these two lines from the source file (I don't need the other two buttons) into the index file after <code>&lt;?php get_header(); ?&gt;</code>:</p>
  
  <pre><code>&lt;div id="displaybox" style="display: none;"&gt;&lt;/div&gt;
  &lt;input type="button" value="View As Image" onClick="javascript:return convert();"&gt;
  </code></pre>
  
  <p>9)  I copied and pasted this line from the source file into the index file after the <code>&lt;div id="captme"&gt;</code>:</p>
  
  <pre><code>&lt;canvas id="localcanvas" style="display:none" width=500 height=500&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>10) All that and nothing works. I can click on the button but it renders nothing.</p>
  
  <p>What went wrong? Thanks for any guidance you share!</p>