HTML iFrame 通过 JavaScript 截屏问题

Question

I am using Html2Canvas JavaScript library to take screenshot of the content rendering in the iFrame.我正在使用Html2Canvas JavaScript 库截取 iFrame 中呈现的内容的屏幕截图。

The content in the iFrame is the Scorm/xAPI (src=folder/index.html) file that is loading from the same server so I am not getting any CORS issue. iFrame 中的内容是从同一服务器加载的 Scorm/xAPI (src=folder/index.html) 文件，因此我没有遇到任何 CORS 问题。 Scorm/xAPI file is just like Power Point slide(s) that is embedded into iFrame to play in the web page. Scorm/xAPI 文件就像嵌入 iFrame 的 Power Point 幻灯片一样，可以在 web 页面播放。

The issue is that when I take screenshot of the iFrame I can only capture partial images because the content has flash objects / java applets plugins.问题是，当我截取 iFrame 的屏幕截图时，我只能捕获部分图像，因为内容有 flash 个对象/java 个小程序插件。 HTML2Canvas library has some limitations and does not cater Flash Objects / Java Applets Plugins. HTML2Canvas 库有一些限制，不满足 Flash 对象/Java 小程序插件。

<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>

This is the iFrame Content这是iFrame的内容

This is the result of the screenshot这是截图的结果

Answer 1

I was facing the same issue, all I have to do is Replace all the relative path of the images, css and js file then it works fine.我遇到了同样的问题，我所要做的就是替换图像的所有相对路径，css 和 js 文件然后它工作正常。 I have statically changed relative path of those file from <link href="mobile/player.css" rel="stylesheet" type="text/css" /> to <link href="http://my-project.com/lms-365/mobile/player.css" rel="stylesheet" type="text/css" /> .我已将这些文件的相对路径从<link href="mobile/player.css" rel="stylesheet" type="text/css" />静态更改为<link href="http://my-project.com/lms-365/mobile/player.css" rel="stylesheet" type="text/css" /> 。
If you have access to the scorm files then you can do that, if not then you have use regEx for that.如果您有权访问 scorm 文件，那么您可以这样做，如果没有，那么您可以使用regEx 。
**You may try something like this: ** **你可以尝试这样的事情：**

$html=`
<img src="/relative/url/img.jpg" />
<form action="/">
<a href='/relative/url/'>Note the Single Quote</a>
<img src="//site.com/protocol-relative-img.jpg" />
`;

$base='https://example.com';

echo preg_replace('~(?:src|action|href)=[\'"]\K/(?!/)[^\'"]*~',"$base$0",$html);

Output is: Output 是：

<img src="https://example.com/relative/url/img.jpg" />
<form action="https://example.com/">
<a href='https://example.com/relative/url/'>Note the Single Quote</a>
<img src="//site.com/protocol-relative-img.jpg" />

OR.....或者.....

You can use base element for this. 您可以为此使用基本元素。

The <base> is an empty element that goes in the <head> . <base>是<head>中的空元素。 Using <base href="https://example.com/path/" /> will tell all relative URLs in the document to refer to https://example.com/path/ instead of the parent URL. Reference for base使用<base href="https://example.com/path/" />将告诉文档中的所有相对 URL 引用https://example.com/path/而不是父级 URL。Reference for base

HTML iFrame 通过 JavaScript 截屏问题

问题描述

1 个解决方案

解决方案1
0 2022-03-12 13:00:15

OR.....或者.....

HTML iFrame 通过 JavaScript 截屏问题

问题描述

1 个解决方案

解决方案1 0 2022-03-12 13:00:15

OR.....或者.....

解决方案1
0 2022-03-12 13:00:15