Codemirror 和 html2canvas：将 iFrame 保存为图像答案

【问题标题】：Codemirror & html2canvas: Save iFrame as ImageCodemirror 和 html2canvas：将 iFrame 保存为图像
【发布时间】：2014-11-16 17:41:40
【问题描述】：

小提琴 1（使用 html2canvas）：http://liveweave.com/HM9hSY
小提琴 2（使用 html2canvas 而不使用 Codemirror）：http://liveweave.com/rS8yxI
小提琴 3（使用 html2canvas 和 Codemirror）：http://liveweave.com/TF3Ono
小提琴 4（使用 html2canvas 和 Codemirror）：http://liveweave.com/hqPoQg

今天我想尝试将 iframe 导出为图像。我对此进行了一些研究，发现了一个名为html2canvas 的插件，它可以将 html 保存为图像。（文档可以查看here）。

Capture HTML Canvas as gif/jpg/png/pdf?
Using HTML5/Canvas/JavaScript to take in-browser screenshots

first fiddle 只是一个实验，所以将 html 保存为图像。（这个小提琴没有使用Codemirror）
second fiddle 保存图像，但不抓取源提供的 iframe 预览。（这个小提琴没有使用 Codemirror）
third fiddle 不保存图像。（这个小提琴没有使用Codemirror）

我的问题是 2nd 和 3rd 小提琴 [html2canvas][17] 不保存 iframe 的预览。

我昨天和今天一直在玩这个，但我没有成功。

今天我决定尝试使用 Codemirror 的代码编辑器来渲染我想要的东西。

基本上我会截取身体的屏幕截图并将图像嵌入其中。

（我指的是Fiddle 4）。

然后我使用window.open 在新窗口中打开图像，然后我将代码编辑器重置回原来的位置。

是否可以将 iframe 的预览/源保存为图像？我做错了什么来达到这个效果吗？

$(document).ready(function() {
  $("#saveimg").click(function() {
    html2canvas($("#preview"), {
      onrendered: function(canvas) {
        var myImage = canvas.toDataURL("image/png");
        $("#imgprev").html("<img src='"+ myImage +"' />");
      }
    });
  });
});

<script src="https://raw.github.com/niklasvh/html2canvas/gh-pages/build/html2canvas.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<link type='text/css' rel='stylesheet' href='http://necolas.github.io/normalize.css/3.0.1/normalize.css' />

<div align="center">
  <p>
    <button id="saveimg">
      Save as Image
    </button>
  </p>
</div>
<iframe id="preview" src="http://duckduckgo.com/"></iframe>
<div id="imgprev"></div>
<canvas id="mycanvas"></canvas>

【问题讨论】：

标签： javascript jquery iframe codemirror html2canvas

【解决方案1】：

我怀疑您遇到了跨域限制。如果您能够在 iframe 中打开 http://mybank.com 并获取结果页面的屏幕截图，则可能会泄漏仅适用于用户（将使用其会话）的私人信息。因此，浏览器不会让你这样做。

【讨论】：

【解决方案2】：

小提琴：http://liveweave.com/LHfsld
小提琴：http://jsbin.com/xutivucanaye/1/edit

这不是最好的解决方案，而且有点怪诞，但我得到了它的工作。好样的。

它不适用于嵌入式图像、iFrame，并且它永远不会完全支持 CSS（您可以从 html2canvas's FAQ 中了解原因）

这是我的整个sn-p：

<!DOCTYPE html>
<html>
  <head>
    <title>Snap a Picture of Preview</title>
    <meta charset='utf-8'>
    <meta name='viewport' content='initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='IE=9' />
    <link type='text/css' rel='stylesheet' href='http://necolas.github.io/normalize.css/3.0.1/normalize.css'/>
    <script type='text/javascript' src='http://code.jquery.com/jquery-latest.min.js'></script>
    <script src='https://raw.github.com/niklasvh/html2canvas/gh-pages/build/html2canvas.js'></script>
    <script src='http://codemirror.net/lib/codemirror.js'></script>
    <script src='http://codemirror.net/mode/xml/xml.js'></script>
    <script src='http://codemirror.net/mode/javascript/javascript.js'></script>
    <script src='http://codemirror.net/mode/css/css.js'></script>
    <script src='http://codemirror.net/mode/htmlmixed/htmlmixed.js'></script>
    <link rel='stylesheet' href='http://codemirror.net/lib/codemirror.css'>
    <link rel='stylesheet' href='http://codemirror.net/doc/docs.css'>
    <script src='http://codemirror.net/mode/htmlmixed/htmlmixed.js'></script>
    <script src='http://codemirror.net/addon/edit/closetag.js'></script>
    <script src='http://codemirror.net/addon/edit/matchbrackets.js'></script>
    <script src='http://codemirror.net/addon/selection/active-line.js'></script>
    <style type='text/css'>
      .CodeMirror {
        float: left;
        width: 50%;
        border: 1px solid black;
      }

      iframe {
        width: 49%;
        float: left;
        height: 300px;
        border: 1px solid black;
        border-left: 0;
      }

      #beforeiframesnap {
        position: absolute;
        top: -500000px;
        left: -500000px;
        width: 0;
        height: 0;
        opacity: 0;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div align='center'>
      <button class='snapFrame'>Snap</button>
    </div>
    <textarea id='code' name='code'><!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title>HTML5 canvas demo</title>
    <style>p {font-family: monospace;}</style>
  </head>
  <body>
    <p>Canvas pane goes here:</p>
    <canvas id=pane width=300 height=200></canvas>

    <script>
      var canvas = document.getElementById('pane');
      var context = canvas.getContext('2d');

      context.fillStyle = 'rgb(250,0,0)';
      context.fillRect(10, 10, 55, 50);

      context.fillStyle = 'rgba(0, 0, 250, 0.5)';
      context.fillRect(30, 30, 55, 50);
    </script>
  </body>
</html></textarea>
    <textarea id='beforeiframesnap'></textarea>
    <iframe id='preview'></iframe>
    <div id='imgprev'></div>

    <script type='text/javascript'>
      $('#beforeiframesnap').val("");
      // Append JS library to HTML <head>
      function appendJSLib(txt) {
        var textArea = editor.getValue();
        var searchText = textArea.search('<head>');
        if(searchText>0) {
          txt = '<head>'+'\n'+txt;
          var updatedTextArea = textArea.replace('<head>',txt);
          editor.setValue(updatedTextArea);
        }
        else {
          reset();
          alert('WARNING! The &lt;head&gt tag seems to be missing in your HTML. Although your code may still work, we highly recommened that you have a valid HTML syntax. Please refer to the new document of correct formatted');
          txt = txt+textArea;
          htmlEditor.setLine(0, txt);
          return false;
        }
      }
      // Append script to HTML <body>
      function appendScript(txt) {
        var textArea = editor.getValue();
        var searchText = textArea.search('<body>');
        if(searchText>0) {
          txt = '<body>'+'\n'+txt;
          var updatedTextArea = textArea.replace('<body>',txt);
          editor.setValue(updatedTextArea);
        }
        else {
          reset();
          alert('WARNING! The <body> tag seems to be missing in your HTML. Although your code may still work, we highly recommened that you have a valid HTML syntax. Please refer to the new document of correct formatted');
          txt = txt+textArea;
          htmlEditor.setLine(0, txt);
          return false;
        }
      }

      $('.snapFrame').on('click', function() {
        $('#beforeiframesnap').val("").val(editor.getValue());
        txt = '<'+'script type=\'text/javascript\' src=\'http://code.jquery.com/jquery-latest.min.js\'>'+'</'+'script'+'>';
        appendJSLib(txt);
        txt = '<'+'script type=\'text/javascript\' src=\'https://raw.github.com/niklasvh/html2canvas/gh-pages/build/html2canvas.js\'>'+'</'+'script'+'>';
        appendJSLib(txt);
        txt = '<'+'script type=\'text/javascript\'>\n$(document).ready(function() {\n  html2canvas($(\'body\'), {\n    onrendered: function(canvas) {\n      var myImage = canvas.toDataURL(\'image/png\');\n      $(\'body\').html(\'<img src=\'+ myImage +\' />\');      window.open(\'javascript:document.write("<img src=\'+ myImage +\' />")\', \'Opened Page\', \'width=660, height=440\');\n    }\n  });\n});\n</'+'script'+'>';
        appendScript(txt);

        setTimeout(function() {
          editor.setValue($('#beforeiframesnap').val());
        }, 1200);
      });

      var delay;

      // Initialize CodeMirror editor
      var editor = CodeMirror.fromTextArea(document.getElementById('code'), {
        mode: 'text/html',
        tabMode: 'indent',
        styleActiveLine: true,
        lineNumbers: true,
        lineWrapping: true,
        autoCloseTags: true
      });

      // Live preview
      editor.on('change', function() {
        clearTimeout(delay);
        delay = setTimeout(updatePreview, 300);
      });

      function updatePreview() {
        var previewFrame = document.getElementById('preview');
        var preview =  previewFrame.contentDocument ||  previewFrame.contentWindow.document;
        preview.open();
        preview.write(editor.getValue());
        preview.close();
      }
      setTimeout(updatePreview, 300);
    </script>
  </body>
</html>

【讨论】：