I want to create screenshot of the telegram widget and put it on a page. Link to code is here.; Also I easily did screenshot of iframe using devtools "create node screenshot", is any JS method to do the same from the code? (I tried google it, but found nothing). HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Telegram widget</title>
</head>
<body>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script async src="https://telegram.org/js/telegram-widget.js?22" data-telegram-post="telegram/83" data-width="100%"></script>
</body>
</html>
JS:
window.onload = function() {
var iframe = document.getElementById('telegram-post-telegram-83');
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
html2canvas(iframeDocument.body).then(function(canvas) {
document.body.appendChild(canvas);
});
};
I tried access to iframe body, but this is not working. I got error:
"<a class='gotoLine' href='#61:75'>61:75</a> Uncaught SecurityError: Failed to read a named property 'document' from 'Window': Blocked a frame with origin \"https://fiddle.jshell.net\" from accessing a cross-origin frame."