Question

我使用Flask作为框架与HTML，javascript为前端。我正在前端显示一个图表。但是我想下载该图的图像。我正在使用HTML2canvas。 Follwing是我的代码。

    <div class="hello" id="section" >
    <p>hi</p>
    <object type="text/html" data="/hello" style="width:100%; height:100%; margin:1%; " autosize=True>
        </object>
    </div>

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

我正在使用以下脚本

$(document).ready(function() {

var element = $("#section"); // 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>

但是我的图像中只有“hi”（由于“p tag”），而不是“object tag”的内容（实际上使用了object标签我嵌入了一个URL，所以内容由于该URL而显示未在图像中捕获）。有人可以帮助我。在此先感谢：）

html2canvas未在捕获的图像中显示完整内容

0 个答案: