Как сделать снимок экрана iframe - html2canvas - PullRequest
Новая
       39

Как сделать снимок экрана iframe - html2canvas

0 голосов
/ 21 мая 2019

Я хочу сохранить экран из 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>

Пожалуйста, скажите мне решение

1 Ответ

0 голосов
/ 21 мая 2019

Я думаю, что это абсолютно невозможно, вы можете сослаться на html2canvas документацию , там четко указано, что они не позволяют захватывать контент из разных источников.

Вам нужно загружать контент iframe из того же домена в любом порядке, чтобы достичь желаемого результата.

...