Question

我添加了HTML2CANVAS，将包含在div中的画布保存为.png格式的图像。它在Chrome中运行良好，但不是在IE 9,10或11中发生的。我在IE中设置断点进行调试，但不会抛出任何错误。

我在div中包装画布的原因是能够使用canvas标记中生成的图表/图形导出图例。

我使用的是AngularJS，但在这种情况下，只使用了一个点击事件。

同样，这在Chrome中运行良好。 IE中没有错误。调试时，它会通过下面的javascript，并且似乎正在适当地点击每一行。我确实在页面FYI中添加了html2canvas.js文件。

我研究了这个，并且发现一些帖子说IE不处理承诺，我需要添加一个polyfill来弥补这一点。我已经做到了，没有任何改变。

由于

这是我的代码。

HTML

<div class="row">
    <div id="widget" class="col-md-12">
    <canvas id="lineChartCanvas" class="chart chart-line" chart-data="data" chart-labels="labels" style="height: 300px; width: 95%;"
            chart-legend="true" chart-series="series" chart-click="onClick"></canvas>
    </div>
</div>

按钮点击事件

<input type="button" class="btn btn-primary" id="btnSave" ng-click="exportChart()" ng-show="isIEbrowser" value="EXPORT CHART"/>

的Javascript /角

function exportChart() {

    var canvasdiv = document.getElementById("widget");

    html2canvas(canvasdiv,{

        onrendered: function (canvas) {
            var a = document.createElement("a");
            a.href = canvas.toDataURL("image/png");
            a.download = userContext.mrn + "_chart_" + datetime + ".png";
            a.click();
        }
    });
}

Answer 1

对于IE，使用BlobBuilder将画布转换为blob对象并将其另存为图像流。

下面是我在我的一个项目中使用的示例代码：

if (navigator.msSaveBlob) {
                    var URL = window.URL;
                    var BlobBuilder = window.MSBlobBuilder;
                    navigator.saveBlob = navigator.msSaveBlob;
                    var imgBlob = canvas.msToBlob();
                    if (BlobBuilder && navigator.saveBlob) {
                        var showSave = function (data, name, mimetype) {
                            var builder = new BlobBuilder();
                            builder.append(data);
                            var blob = builder.getBlob(mimetype || "application/octet-stream");
                            navigator.saveBlob(blob, name);
                        };

                        showSave(imgBlob, fileName, "image/png");
                    }
                }

使用HTML2CANVAS将{html保存为图像

1 个答案: