title: How to Convert iframe to canvas?
body: <p>I am trying to save all content into another page as an image.</p>
  <p>I have explored the way to do this so I think that I need to convert that page to canvas first.</p>
  <p>So, I have tried to use the link that I want to save that to img be an iframe in my current page first and then convert iframe to canvas but it's not working.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
  
      var element = $("#html-content-holder"); // global variable
      var getCanvas; // global variable
  
      $("#btn-Preview-Image").on('click', function () {
          html2canvas(element, {
              onrendered: function (canvas) {
                  $("#previewImage").append(canvas);
                  getCanvas = canvas;
              }
          });
      });
  
      $("#btn-Convert-Html2Image").on('click', function () {
          var imgageData = getCanvas.toDataURL("image/png");
          // Now browser starts downloading it instead of just showing it
          var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
          $("#btn-Convert-Html2Image").attr("download", "your_pic_name.png").attr("href", newData);
      });
  
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="http://files.codepedia.info/uploads/iScripts/html2canvas.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;iframe id="html-content-holder" width="100%" height="100%" src="http://api.marketanyware.com/chartv2/engine/index.html?{bodyColor:%27#000000',api:{params:[{Stock:'SET',Period:'2hour',ChartList:{OHLC:true,EODHLine:true,EMA: [5, 10, 25, 50, 75, 200],RSI: [7],MACDBar:false,MACD: [{ v12: 12, v26: 26, vref: 9,type:11}/*, { v1: 12, v2: 26, vref: 9}*/],Volume:true,VolumeColor:false}}]}}"&gt;&lt;/iframe&gt;
  
  &lt;input id="btn-Preview-Image" type="button" value="Preview"/&gt;
  &lt;a id="btn-Convert-Html2Image" href="#"&gt;Download&lt;/a&gt;
  &lt;br/&gt;
  &lt;h3&gt;Preview :&lt;/h3&gt;
  &lt;div id="previewImage"&gt;</code></pre>
  </div>
  </div>
  </p>