Как конвертировать iframe в canvas?

Я пытаюсь сохранить весь контент на другой странице изображения.

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

Итак, я попытался использовать ссылку, которую я хочу сохранить, чтобы сначала быть iframe на моей текущей странице, а затем преобразовать iframe в canvas, но это не работает.

$(document).ready(function(){

    var element = $("#html-content-holder"); // global variable
    var getCanvas; // global variable

    $("#btn-Preview-Image").on('click', function () {
        html2canvas(element, {
            onrendered: function (canvas) {
                $("#previewImage").append(canvas);
                getCanvas = canvas;
            }
        });
    });

    $("#btn-Convert-Html2Image").on('click', function () {
        var imgageData = getCanvas.toDataURL("image/png");
        // Now browser starts downloading it instead of just showing it
        var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
        $("#btn-Convert-Html2Image").attr("download", "your_pic_name.png").attr("href", newData);
    });

});
<script src="http://files.codepedia.info/uploads/iScripts/html2canvas.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<iframe id="html-content-holder" width="100%" height="100%" src="http://api.marketanyware.com/chartv2/engine/index.html?{bodyColor:%27#000000',api:{params:[{Stock:'SET',Period:'2hour',ChartList:{OHLC:true,EODHLine:true,EMA: [5, 10, 25, 50, 75, 200],RSI: [7],MACDBar:false,MACD: [{ v12: 12, v26: 26, vref: 9,type:11}/*, { v1: 12, v2: 26, vref: 9}*/],Volume:true,VolumeColor:false}}]}}"></iframe>

<input id="btn-Preview-Image" type="button" value="Preview"/>
<a id="btn-Convert-Html2Image" href="#">Download</a>
<br/>
<h3>Preview :</h3>
<div id="previewImage">

Источник

3 ответа

Вы не можете получить доступ к содержимому iframe перекрестного происхождения.

Также не может html2canvas, который должен анализировать структуру DOM, чтобы иметь возможность нарисовать ее на холсте.

Для фреймов того же происхождения,

html2canvas не будет сам по себе получать содержимое вашего фрейма, поэтому вам придется передать его contentDocument.documentElement в качестве параметра, в противном случае он просто отобразит пустое поле.

frame.onload =()=>{
  html2canvas(frame.contentDocument).then((canvas)=>{
    document.body.appendChild(canvas);
  });
  };

Ссылка для скрипки, так как кадры stacknippets помещены в песочницу, и мы ничего не можем с этим поделать...

Источник

Попробуй это:

var element = $(document.querySelector("#iframe-id")).contents().find('body')[0];
        html2canvas(element).then(canvas => {
                document.body.appendChild(canvas)
            });
Источник

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

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

Google Chrome в своей новой версии имеет возможность захвата из определенной области страницы, которая называется « Захват региона» . эта возможность встроена в Chrome версии 104 и выше .

с этой возможностью вы можете захватывать все, что угодно на странице, включая фреймы.

вы можете увидеть демо и пример здесь

Источник
Другие вопросы по тегам