Codemirror和html2canvas：将iFrame另存为图片
[英]Codemirror & html2canvas: Save iFrame as Image
问题描述
Fiddle 1 (Using html2canvas ): http://liveweave.com/HM9hSY 
小提琴1（使用html2canvas ）： http : //liveweave.com/HM9hSY
Fiddle 2 (Using html2canvas without Codemirror ): http://liveweave.com/rS8yxI 小提琴2（使用html2canvas无Codemirror ）： http://liveweave.com/rS8yxI
Fiddle 3 (Using html2canvas with Codemirror ): http://liveweave.com/TF3Ono 小提琴3（将HTML2canvas与Codemirror 结合使用）： http : //liveweave.com/TF3Ono
Fiddle 4 (Using html2canvas with Codemirror ): http://liveweave.com/hqPoQg 小提琴4（将HTML2canvas与Codemirror 结合使用）： http : //liveweave.com/hqPoQg
Today I wanted to try and export an iframe as an Image. 今天，我想尝试将iframe导出为图片。 I did some research on this and came across a plugin called html2canvas which can save html as an image. 我对此进行了一些研究，发现了一个名为html2canvas的插件，可以将html保存为图像。 (The documentation can be viewed here ). （可在此处查看文档）。
Capture HTML Canvas as gif/jpg/png/pdf? 将HTML Canvas捕获为gif / jpg / png / pdf吗？
Using HTML5/Canvas/JavaScript to take in-browser screenshots 使用HTML5 / Canvas / JavaScript拍摄浏览器内屏幕截图
The first fiddle is just an experiment so save html as an image. 第一个小提琴只是一个实验，因此将html保存为图像。 (This fiddle is not using Codemirror ) （此小提琴未使用Codemirror ）
The second fiddle saves the image but doesn't grab the iframe preview given from source. 第二个小提琴会保存图像，但不会获取源提供的iframe预览。 (This fiddle is not using Codemirror) （此小提琴未使用Codemirror）
The third fiddle does not save an image. 第三小提琴不保存图像。 (This fiddle is not using Codemirror ) （此小提琴未使用Codemirror ）
My problem is with the 2nd and 3rd fiddles where [html2canvas][17] does not save the iframe's preview. 我的问题是第二个和第三个小提琴，其中[html2canvas] [17]无法保存iframe的预览。
I've been playing with this throughout yesterday and today and I haven't been successful. 昨天和今天，我一直在玩这个游戏，但没有成功。
Today I decided to try and use Codemirror's code editor to render what I want instead. 今天，我决定尝试使用Codemirror的代码编辑器来呈现我想要的内容。
Basically I take a screenshot of the body and embed an image into it. 基本上，我会截取身体的屏幕截图并将图像嵌入其中。
(This is Fiddle 4 I'm referring to). （这是我指的小提琴4 ）。
I then open the image in a new window using window.open after that I reset the code editor back to where it was. 然后，我使用window.open在新窗口中打开图像，然后将代码编辑器重置回原来的位置。
Is it possible to save an iframe's preview/source as an image? 是否可以将iframe的预览/源另存为图像？ Am I doing anything wrong to achieve this effect? 为了达到这个效果，我在做错什么吗？
$(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>
2 个解决方案
解决方案1
1 2014-09-22 20:46:38
I suspect you are running into cross-origin restrictions. 我怀疑您遇到跨域限制。 If you were able to open http://mybank.com in an iframe and get a screenshot of the resulting page, that might leak private information that was only meant for the user (whose session will be used). 如果您能够在iframe中打开http://mybank.com并获取结果页面的屏幕截图，则可能会泄漏仅用于用户的私人信息（将使用其会话）。 Thus, browser will not let you do this. 因此，浏览器将不允许您执行此操作。
解决方案2
0 已采纳 2014-09-23 03:34:58
Fiddle: http://liveweave.com/LHfsld 小提琴： http ： //liveweave.com/LHfsld
Fiddle: http://jsbin.com/xutivucanaye/1/edit 小提琴： http : //jsbin.com/xutivucanaye/1/edit
It's not the best solution and a bit grotesque but I got it to work. 这不是最好的解决方案，但有点怪诞，但我可以使用它。 Well kind of. 好吧。
It doesn't work well with embedded images, iFrames, and it'll never have full CSS support (You can read why from html2canvas's FAQ ) 它不适用于嵌入式图像，iFrame，并且永远不会提供完全的CSS支持（您可以从html2canvas的FAQ中了解原因）
Here's my entire snippet: 这是我的整个代码段：
<!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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.