代码镜像&html2canvas:将iFrame另存为图像
Codemirror & html2canvas: Save iFrame as Image
Fiddle 1（使用html2canvas）：http://liveweave.com/HM9hSY
Fiddle 2（使用不带Codemirror的html2 canvas）：http://liveweave.com/rS8yxI
Fiddle 3（使用带有Codemirror的html2canvas）：http://liveweave.com/TF3Ono
Fiddle 4（使用带有Codemirror的html2canvas）：http://liveweave.com/hqPoQg
今天我想尝试将iframe导出为Image。我对此做了一些研究，发现了一个名为html2canvas的插件，它可以将html保存为图像。（文档可在此处查看）。
是否将HTML画布捕获为gif/jpg/png/pdf
使用HTML5/Canvas/JavaScript获取浏览器屏幕截图
第一件事只是一个实验，所以把html保存为图像。（此小提琴未使用Codemirror）
第二个fiddle保存了图像，但没有从源代码中获取iframe预览。（此小提琴未使用Codemirror）
第三把小提琴不会保存图像。（此小提琴未使用Codemirror）
我的问题是第二和第三个小提琴，其中[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>我怀疑您遇到了跨来源限制。如果您能够在iframe中打开http://mybank.com并获得结果页面的屏幕截图，则可能会泄露仅针对用户（将使用其会话）的私人信息。因此，浏览器不会允许您这样做。
Fiddle：http://liveweave.com/LHfsld
Fiddle：http://jsbin.com/xutivucanaye/1/edit
这不是最好的解决方案，也有点奇怪，但我做到了。不错。
它不能很好地与嵌入式图像、iFrame配合使用，而且它永远不会有完整的CSS支持（你可以从html2canvas的常见问题中了解原因）
这是我的全部片段：
<!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 <head> 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>
相关文章：
- 无法在本地计算机中将画布另存为图像
- 如何将 html5 画布另存为窗口 8 Metro 应用程序中的图像文件
- 试图制作一个“;另存为“;使用php's”;file_put_contents”;和javascript&quo
- Safari浏览器上的“强制另存为”对话框
- 强制浏览器打开“;另存为“;对话框
- execCommand('另存为'，true，'data.csv'）;不在IE工作
- 更改音频速度，然后另存为新文件
- 将响应另存为文件
- 覆盖 HTML 画布上的“另存为”行为
- 如何在浏览器中触发另存为对话框，以便可以在内存中保存 json 数据
- 更改“将图像另存为”的操作以重定向到相应的网页
- 如何为图像创建“另存为”按钮
- 将 JavaScript 对象另存为字符串
- 如何定义图像'另存为'大小
- 使用javascript将画布另存为图像
- 嵌套画布另存为单个图像
- 如何在Chrome中禁用“另存为”对话框
- 将 iframe 内容另存为 XML
- 将 Iframe 的源另存为桌面上的图像
- 代码镜像&html2canvas:将iFrame另存为图像
