Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!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'>
      <p>
        <button class='snapFrame'>Snap</button>
      </p>
    </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>
  </body>
</html>
 
$('#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);
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers