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 documentation，因为那里有明显的限制，即它们不允许捕获跨域内容。

您需要以任意顺序从同一域加载该iframe内容，以实现所需的输出。

如何捕获iframe的屏幕截图-html2canvas

1 个答案: