如何将 iframe 转换为画布？

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