javascript - 使用 HTML2CANVAS 将 html 保存为图像

标签 javascript angularjs html2canvas

我添加了 HTML2CANVAS 以将包含在 div 中的 Canvas 保存为 .png 格式的图像。它在 Chrome 中工作得很好,但在 IE 9、10 或 11 中没有任何反应。我在 IE 中设置了断点来调试,但没有抛出任何错误。

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

我使用的是 AngularJS,但在本例中,仅使用了单击事件。

同样,这在 Chrome 中运行良好。 IE 中不会引发任何错误。调试时,它会遍历下面的 javascript,并且似乎正确地命中了每一行。我确实在页面中添加了 html2canvas.js 文件供引用。

我对此进行了研究,并发现一些帖子说 IE 不处理 promise ,我需要添加一个填充来弥补这一点。我已经这样做了,但没有任何改变。

谢谢

这是我的代码。

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/Angular

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

最佳答案

对于 IE,使用 BlobBuilder 将 Canvas 转换为 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");
                    }
                }

关于javascript - 使用 HTML2CANVAS 将 html 保存为图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37331494/

相关文章:

javascript - 将类应用于 javascript 数据表中的每一行

javascript - 保持我的网站更新 - 有更好的方法吗?

javascript - 使用 $scope 访问 Angular 重用函数

javascript - 将 UI-Bootstrap Modal 与 Angular-Fullstack 和 ES6 结合使用

javascript - 单击时捕获 div

javascript - IE8 上的 html2canvas 和 flashcanvas 无法正常工作

javascript - 显示模式对话框 jquery

javascript - 无法让 Angular UI-Map 工作

javascript - Ng-src 不会在 AngularJS View 中更新

javascript - 如何删除 Canvas 周围的灰色边框