title: capture div into image using html2canvas
body: <p>I'm trying to capture a div into an image using <code>html2canvas</code></p>
  
  <p>I have read some similar question here like</p>
  
  <p><a href="https://stackoverflow.com/q/9250505/926460">How to upload a screenshot using html2canvas?</a></p>
  
  <p><a href="https://stackoverflow.com/q/10457608/926460">create screenshot of web page using html2canvas (unable to initialize properly)</a></p>
  
  <hr>
  
  <p>I have tried the code</p>
  
  <pre><code>canvasRecord = $('#div').html2canvas(); 
  dataURL = canvasRecord.toDataURL("image/png");
  </code></pre>
  
  <p>and the <code>canvasRecord</code> will be <code>undefined</code> after <code>.html2canvas()</code> called</p>
  
  <hr>
  
  <p>and also this</p>
  
  <pre><code>$('#div').html2canvas({
        onrendered: function (canvas) {
             var img = canvas.toDataURL()
             window.open(img);
        } 
  });
  </code></pre>
  
  <p>browser gives some (48 to be exact) similar errors like:</p>
  
  <pre><code>GET http://html2canvas.appspot.com/?url=https%3A%2F%2Fmts1.googleapis.com%2Fvt%…%26z%3D12%26s%3DGalileo%26style%3Dapi%257Csmartmaps&amp;callback=html2canvas_1 404 (Not Found) 
  </code></pre>
  
  <hr>
  
  <p>BTW, I'm using v0.34 and I have added the reference file <code>html2canvas.min.js</code> and <code>jquery.plugin.html2canvas.js</code></p>
  
  <p>How can I convert the <code>div</code> into <code>canvas</code> in order to capture the image.</p>
  
  <p><strong>EDIT on 26/Mar/2013</strong></p>
  
  <p>I found <a href="https://stackoverflow.com/a/14763225/926460">Joel's example</a> works.</p>
  
  <p>But unfortunately when Google map embedded in my app, there will be errors.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style type="text/css"&gt;
  div#testdiv
  {
      height:200px;
      width:200px;
      background:#222;
  }
  div#map_canvas
  {
      height: 500px;
      width: 800px;
      position: absolute !important;
      left: 500px;
      top: 0;
  }
  &lt;/style&gt;
   &lt;script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="html2canvas.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="jquery-1.7.2.min.js"&gt;&lt;/script&gt;
  &lt;script language="javascript"&gt;
  $(window).load(function(){
       var mapOptions = {
          backgroundColor: '#fff',
          center: new google.maps.LatLng(1.355, 103.815),
          overviewMapControl: true,
          overviewMapControlOptions: { opened: false },
          mapTypeControl: true,
          mapTypeControlOptions: { position: google.maps.ControlPosition.TOP_LEFT, style: google.maps.MapTypeControlStyle.DROPDOWN_MENU },
          panControlOptions: { position: google.maps.ControlPosition.RIGHT_CENTER },
          zoomControlOptions: { position: google.maps.ControlPosition.RIGHT_CENTER },
          streetViewControlOptions: { position: google.maps.ControlPosition.RIGHT_CENTER },
          disableDoubleClickZoom: true,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          minZoom: 1,
          zoom: 12
      };
      map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
  
      $('#load').click(function(){
  
              html2canvas($('#testdiv'), {
                  onrendered: function (canvas) {
                      var img = canvas.toDataURL("image/png")
                      window.open(img);
                  }
              });
  
      });
  });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="testdiv"&gt;
  &lt;/div&gt;
  &lt;div id="map_canvas"&gt;&lt;/div&gt;
  &lt;input type="button" value="Save" id="load"/&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>