我添加了 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/