I am using Html2Canvas JavaScript library to take screenshot of the content rendering in the 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. Scorm/xAPI file is just like Power Point slide(s) that is embedded into iFrame to play in the web page.
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. HTML2Canvas library has some limitations and does not cater Flash Objects / Java Applets Plugins.
<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
This is the result of the screenshot
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. 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" />.If you have access to the scorm files then you can do that, if not then you have use regEx for that.
**You may try something like this : **
Output is :
OR.....
You can use base element for this.The
<base>is an empty element that goes in the<head>. Using<base href="https://example.com/path/" />will tell all relative URLs in the document to refer tohttps://example.com/path/instead of the parent URL. Reference for base