CodeMirror & html2canvas: Сохранить IFrame как изображение

Фидл 1 (Использование html2canvas): http://liveweave.com/HM9hSY
Скрипки 2 (Использование html2canvas без Codemirror): http://liveweave.com/rS8yxI
Скрипки 3 (Использование html2canvas с Codemirror): http://liveweave.com/TF3Ono
Fiddle 4 (Использование html2canvas с Codemirror): http://liveweave.com/hqPoQg CodeMirror & html2canvas: Сохранить IFrame как изображение

Сегодня я хотел попробовать экспортировать iframe как изображение. Я провел некоторое исследование по этому вопросу и наткнулся на плагин под названием html2canvas, который может сохранять html в качестве изображения. (Документация может быть просмотрена here).

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

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

источник

2014-09-22 Michael Schwartz

Fiddle: http://liveweave.com/LHfsld
Fiddle: http://jsbin.com/xutivucanaye/1/edit

Это не лучшее решение, и немного гротескно, но я получил его на работу. Хорошо.

Это не очень хорошо работает с вложенными изображениями, плавающие фреймы, и это будет никогда полную поддержку CSS (Вы можете прочитать, почему из html2canvas's FAQ)

Вот весь мой сниппет:

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

источник

2014-09-23 03:34:58

Я подозреваю, что вы работаете в ограничениях крест происхождения. Если вы смогли открыть http://mybank.com в iframe и получить скриншот результирующей страницы, это может привести к утечке частной информации, предназначенной только для пользователя (чей сеанс будет использоваться). Таким образом, браузер не позволит вам это сделать.

источник

2014-09-22 20:46:38 Marijn

CodeMirror & html2canvas: Сохранить IFrame как изображение

ответ

Смежные вопросы