如何捕获iframe的截图 - html2canvas

Question

我想从iframe中保存屏幕以保存为图片并分享。 问题是当我点击我制作的代码时，不会显示iframe中的视频。 请告诉我解决方案。 或者有没有iframe以外的方式我的视频是html5

我试图使用此代码，但它无法正常工作

 <link rel="stylesheet" type="text/css" href="_styles.css" media="screen"> <title>Fullscreen API | The CSS Ninja</title> <div id="content_page_data"> <div id="my_rectangle"> TEST SCREENSHOTS <iFrame src = "http://rcheewaonline.com/dropbox/test/story_html5.html" width= "100%" height="795px" frameborder ="0" scrolling = "yes" align = "center"></iFrame></div><image id="theimage"></image><center><button onclick="to_image()" class="button button5">บันทึกภาพ เพื่อแชร์</button></center> </div> <center><div style="height:10px" aria-hidden="true" class="wp-block-spacer"></div><image id="theimage"></image> <center><div class="fl"><button id="fullscreeniframe" class="button button5">Fullscreen</button> </div></center> <script type="text/javascript" src="https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js"></script> <script type="text/javascript"> html2canvas(document.getElementById("my_rectangle"),{ onrendered: function(canvas) { canvas.id = "someId"; canvas.style.display="none"; document.getElementById("content_page_data").appendChild(canvas); } }); function to_image(){ var canvas = document.getElementById("someId"); document.getElementById("theimage").src = canvas.toDataURL(); Canvas2Image.saveAsPNG(canvas); } </script> </body> <script> (function(window, document){ var $ = function(selector,context){return(context||document).querySelector(selector)}; var iframe = $("iframe"), domPrefixes = 'Webkit Moz O ms Khtml'.split(' '); var fullscreen = function(elem) { var prefix; // Mozilla and webkit intialise fullscreen slightly differently for ( var i = -1, len = domPrefixes.length; ++i < len; ) { prefix = domPrefixes[i].toLowerCase(); if ( elem[prefix + 'EnterFullScreen'] ) { // Webkit uses EnterFullScreen for video return prefix + 'EnterFullScreen'; break; } else if( elem[prefix + 'RequestFullScreen'] ) { // Mozilla uses RequestFullScreen for all elements and webkit uses it for non video elements return prefix + 'RequestFullScreen'; break; } } return false; }; // Webkit uses "requestFullScreen" for non video elements var fullscreenother = fullscreen(document.createElement("iframe")); if(!fullscreen) { alert("Fullscreen won't work, please make sure you're using a browser that supports it and you have enabled the feature"); return; } $("#fullscreeniframe").addEventListener("click", function(){ // iframe fullscreen and non video elements in webkit use request over enter iframe[fullscreenother](); }, false); })(this, this.document); </script> 

请告诉我解决方案

Answer 1

我认为这绝对不可能，你可以在那里引用html2canvas文档 ，但是明确提到它们不允许捕获跨源内容。

您需要从同一域中加载任何iframe内容，以实现您的愿望输出。