我正在使用Html2Canvas JavaScript 库来截取 iFrame 中内容呈现的屏幕截图。
iFrame 中的内容是从同一服务器加载的 Scorm/xAPI (src=folder/index.html) 文件,因此我没有遇到任何 CORS 问题。Scorm/xAPI 文件就像嵌入到 iFrame 中以在网页中播放的 Power Point 幻灯片。
问题是,当我截取 iFrame 的屏幕截图时,我只能捕获部分图像,因为内容具有 Flash 对象/Java 小程序插件。HTML2Canvas 库有一些限制,不支持 Flash 对象/Java Applets 插件。
<button id="btn-screenshot">Button To Take Screenshot</button>
<iframe id="iframe" src="folder/index.html"></iframe>
<img src="" id="result" />
<script>
$(document).ready(function () {
$(document).on('click', '#btn-screenshot', function () {
let iframe = document.querySelector("#iframe").contentWindow.document.body;
html2canvas(iframe).then(canvas => {
let base64Canvas = canvas.toDataURL("image/png");
$('#result').attr('src',base64Canvas)
});
})
})
</script>