html - 如何将 iframe 转换为 Canvas ？

Question

我正在尝试将所有内容作为图像保存到另一个页面。

我已经探索了执行此操作的方法，因此我认为我需要先将该页面转换为 Canvas 。

因此，我尝试使用我想将其保存到 img 的链接首先成为我当前页面中的 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">

Answer 1

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

html2canvas 也不能，它需要解析 DOM 结构才能在 Canvas 上绘制它。

对于同源 iframe，

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

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

Link for fiddle因为 stacknippets 框架是沙盒化的，我们不能用它做任何事情......