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

ps0604

我正在尝试编写一个使用Highcharts图像的javascript函数,将其转换为画布,然后在本地下载文件图像(不发送至服务器)。

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

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

标记

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

更新小提琴

编辑

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章