Javascript Highcharts:在IE中将画布图像保存为本地文件

我试图编写一个javascript函数，它获取Highcharts图像，将其转换为canvas，并在本地下载文件图像，而无需访问服务器

我的问题特别是IE。我尝试将msSaveBlob与Blob和MSBlobBuilder一起使用；在第一种情况下，文件下载，但内容不正确，打开时图像损坏

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

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

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

第二段代码使用MSBlobBuilder/msSaveBlob，但不生成文件，使用IE运行：

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

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

有没有办法让这些工作顺利进行？有没有更好的方法？我知道这只适用于IE10+。

toDataURL生成PNG的base64字符串。不过，您需要原始数据或数据

由此：

通过使用canvas.toDataURL，您可以排除 使用其他应用程序查看保存的图形。保存图形 作为一个PNG文件，它的优点是允许许多标准的 用于显示图形的应用程序，包括浏览器。通过 切换到canvas.msToBlob，我们可以将文件直接保存到 巴布亚新几内亚

因此：

更新

编辑

有关将base64图像转换为Blob的更通用的方法，请参见此答案

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

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

toDataURL生成PNG的base64字符串。不过，您需要原始数据或数据

由此：

通过使用canvas.toDataURL，您可以排除 使用其他应用程序查看保存的图形。保存图形 作为一个PNG文件，它的优点是允许许多标准的 用于显示图形的应用程序，包括浏览器。通过 切换到canvas.msToBlob，我们可以将文件直接保存到 巴布亚新几内亚

因此：

更新

编辑

有关将base64图像转换为Blob的更通用的方法，请参见此答案

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

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

---

你的JSFIDLE链接是404。另外，您是如何从Highcharts SVG获取画布的？不确定jsFiddle发生了什么，这里再次介绍了从Highcharts生成的画布和使用msSaveBlob下载的图像，并使用IE10small修复您上面的链接JSFIDLE链接是404。另外，您是如何从Highcharts SVG获取画布的？不确定JSFIDLE发生了什么，这里再次介绍从Highcharts生成的画布和使用msSaveBlob下载的图像，并使用IE10small修复程序运行到上面的链接，谢谢标记。有没有办法保存JPEG？msToBlob似乎只与PNG@ps0604，看这个：，它借用了这里令人敬畏的答案：谢谢马克。有没有办法保存JPEG？msToBlob似乎只与PNG@ps0604，看这个：，它借用了这里令人敬畏的答案：