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

Question

我正在尝试编写一个javascript函数,它采用Highcharts图像,将其转换为画布,并在本地下载文件图像(无需转到服务器).

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

Fist代码使用Blob/msSaveBlob(参见jsfiddle,与IE 一起运行):

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

第二个代码使用MSBlobBuilder/msSaveBlob但不生成文件(请参阅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).

从这个链接:

通过使用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");
 } 

更新小提琴.

EDITS

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