0
340
ViewsHTML iFrame Screenshot Capture issue through JavaScript
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
1 answers
Answer question0
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 : **
$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 :
<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>. 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