Codemirror和html2canvas：將iFrame另存為圖片
[英]Codemirror & html2canvas: Save iFrame as Image
問題描述
小提琴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保存為圖像。 （可在此處查看文檔）。
將HTML Canvas捕獲為gif / jpg / png / pdf嗎？
使用HTML5 / Canvas / JavaScript拍攝瀏覽器內屏幕截圖
第一個小提琴只是一個實驗，因此將html保存為圖像。 （此小提琴未使用Codemirror ）
第二個小提琴會保存圖像，但不會獲取源提供的iframe預覽。 （此小提琴未使用Codemirror）
第三小提琴不保存圖像。 （此小提琴未使用Codemirror ）
我的問題是第二個和第三個小提琴，其中[html2canvas] [17]無法保存iframe的預覽。
昨天和今天，我一直在玩這個游戲，但沒有成功。
今天，我決定嘗試使用Codemirror的代碼編輯器來呈現我想要的內容。
基本上，我會截取身體的屏幕截圖並將圖像嵌入其中。
（這是我指的小提琴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>
2 個解決方案
解決方案1
1 2014-09-22 20:46:38
我懷疑您遇到跨域限制。 如果您能夠在iframe中打開http://mybank.com並獲取結果頁面的屏幕截圖，則可能會泄漏僅用於用戶的私人信息（將使用其會話）。 因此，瀏覽器將不允許您執行此操作。
解決方案2
0 已采納 2014-09-23 03:34:58
小提琴： http ： //liveweave.com/LHfsld
小提琴： http : //jsbin.com/xutivucanaye/1/edit
這不是最好的解決方案，但有點怪誕，但我可以使用它。 好吧。
它不適用於嵌入式圖像，iFrame，並且永遠不會提供完全的CSS支持（您可以從html2canvas的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 <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>
如何在 php 中使用 HTML2CANVAS 將 DIV 的圖像保存到桌面
[英]How to save image of DIV to desktop using HTML2CANVAS in php
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.