Question

我试图编写一个带有Highcharts图像的javascript函数，将其转换为画布，然后在本地下载文件图像（无需转到服务器）。

我的问题特别针对IE。我尝试使用带有Blob和MSBlobBuilder的msSaveBlob;在第一种情况下，文件下载但内容不正确（打开时图像已损坏）。

Fist代码使用Blob / msSaveBlob（see jsfiddle，与IE一起运行）：

var image = canvas.toDataURL("image/jpeg");     
if (navigator.msSaveBlob) {
    return navigator.msSaveBlob(new Blob([image],{type:"image/jpeg"}),"file23.jpeg");
}

第二个代码使用MSBlobBuilder / msSaveBlob，但没有生成一个文件（see jsfiddle，与IE一起运行）：

var image = canvas.toDataURL("image/jpeg"); 
if (window.MSBlobBuilder) {
    var bb = new MSBlobBuilder();
    bb.append(image);
    return navigator.msSaveBlob(bb, "file24.jpeg");
}

任何想法如何使这些工作？有首选方法吗？我知道这只适用于IE10 +。

Answer 1

toDataURL生成PNG的base64字符串。但是，您需要原始数据（或blob）。

从此link：

通过使用canvas.toDataURL（），您可以轻松排除这种可能性使用其他应用程序查看已保存的图形。保存图纸作为PNG文件的好处是允许一些标准应用程序，包括浏览器，用于显示绘图。通过切换到canvas.msToBlob（），我们可以直接保存文件 PNG ...

所以：

 canvg(canvas, svg);
 image = canvas.msToBlob();            
 if (navigator.msSaveBlob) {
     return navigator.msSaveBlob(new Blob([image],                       
                                    {type:"image/png"}),"file23.png");
 }

更新fiddle。

<强> EDITS

有关将base64图像转换为blob的更通用方法，请参阅此答案here。

以及如何在此工作流程中执行此操作的示例：

var image = canvas.toDataURL( "image/jpeg" );
image = b64toBlob(image.replace("data:image/jpeg;base64,",""),"image/jpeg")

if (navigator.msSaveBlob) {
    return navigator.msSaveBlob(image,"file23.jpeg");
}

Highcharts：将画布图像保存为IE中的本地文件

1 个答案: