javascript - 通过 JavaScript 捕获 HTML iFrame 屏幕截图问题

Question

我正在使用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>

这是 iFrame 内容

这是截图的结果

标签： javascripthtmliframescormxapi