javascript - Highcharts:在 IE 中将 Canvas 图像保存为本地文件

Question

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

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

拳头代码使用 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 :

By using canvas.toDataURL(), you preclude the possibility of easily using another application to view a saved drawing. Saving the drawing as a PNG file has the benefit of allowing a number of standard applications, including the browser, to display the drawing. By switching to canvas.msToBlob(), we can save the file directly to PNG...

所以:

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

更新fiddle .

编辑

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