Question

我尝试将其他页面中的所有内容保存到图像中。

我已经探索了这样做的方法所以我认为我需要先将该页面转换为画布。

所以，我尝试使用我要保存的链接，首先在当前页面中成为iframe，然后将iframe转换为画布，但它不起作用。

＆＃13;

$(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);
    });

});

＆＃13;

<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">

＆＃13;

Answer 1

您无法访问跨域iframe的内容。

html2canvas也不能解析DOM结构以便能够在画布上绘制它。

对于相同的原始iframe，

html2canvas不会自动获取您框架的内容，因此您必须将contentDocument.documentElement作为参数传递，否则它只会呈现一个空框。

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

Link for fiddle因为stacknippets框架是沙盒的，我们无法对它做任何事情......

Answer 2

尝试一下：

var element = $(document.querySelector("#iframe-id")).contents().find('body')[0];
        html2canvas(element).then(canvas => {
                document.body.appendChild(canvas)
            });

如何将iframe转换为画布？

2 个答案:

您无法访问跨域iframe的内容。

对于相同的原始iframe，