Highcharts：在IE中將本地文件保存爲canvas圖像

我試圖編寫一個需要使用Highcharts圖片的JavaScript函數，將其轉換爲畫布，並在本地下載文件圖像（不需要去服務器）。Highcharts：在IE中將本地文件保存爲canvas圖像

我的問題是具體與IE。我嘗試使用Blob和MSBlobBuilder使用msSaveBlob;在第一種情況下，文件下載但內容不正確（打開時圖像已損壞）。

拳代碼使用斑點/ 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 +。

來源

2014-10-06 ps0604

您的jsfiddle鏈接404還有，你是如何得到從Highcharts SVG畫布？ – Mark 2014-10-07 15:19:04

不知道jsFiddle發生了什麼，在這裏你再次去（從highcharts生成的畫布和與msSaveBlob下載的圖像）http://jsfiddle.net/ps0604/u7sxqu2e/1/與IE10運行 – ps0604 2014-10-07 15:53:40

小修覆上面的鏈接http：///jsfiddle.net/ps0604/u7sxqu2e/2/ – ps0604 2014-10-07 16:26:48

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。

編輯

對於以base64轉換圖像斑點看到這個答案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"); 
}

來源

2014-10-07 16:44:41 Mark

謝謝馬克。有沒有辦法保存JPEG？ msToBlob（）似乎只適用於PNG – ps0604 2014-10-07 17:32:48

@ ps0604，請參閱：http://jsfiddle.net/u7sxqu2e/4/，它從這裏真棒的答案借：http://stackoverflow.com/a/16245768/16363 – Mark 2014-10-07 19:25:59

Highcharts：在IE中將本地文件保存爲canvas圖像

回答

相關問題