js 保存圖片到本地

圖片來源是echarts，對echarts圖片保存重寫。

保存一個圖片到本地，前端最方便的實現方法就是

1---a.download=fileName, a.href=imgBase64Url, a.click

1---img.src=imgBase64Url, img.click

還有其餘方式

2---w=window.open(imgBase64Url), w.document.execCommand("SaveAs")

3---ActiveXObject.open(imgBase64Url)

var xmlHTTP = new ActiveXObject("Microsoft.XMLHTTP");
            xmlHTTP.open("Get", strRemoteURL, false);
            xmlHTTP.send();
            var adodbStream = new ActiveXObject("ADODB.Stream");
            adodbStream.Type = 1;//1=adTypeBinary 
            adodbStream.Open();
            adodbStream.write(xmlHTTP.responseBody);
            adodbStream.SaveToFile(strLocalURL, 2);
            adodbStream.Close();
            adodbStream = null;
            xmlHTTP = null;

可是這些方法的一個共同點就是get走瀏覽器地址，若是遇到大圖片的狀況，呵呵，任憑你有這麼多方法，每一個都不行。個人狀況IE下imgBase64Url長度2萬多個字符，而衆所周知IE瀏覽器的URL限制是兩千，那麼，post的話就不是下載了，難道要傳到服務器再傳回來？！因而考慮模仿服務器輸出流的方式下載。

4---navigator.msSaveBlob(imgBlob, fileName)

那麼如何獲得imgBlob，百度一下有幾個方法，涉及到window.atob，全部說All IE bye-bye。

最後，反覆測試了echarts的圖片下載功能，在IE下根本不是下載，而是打開一個新的頁面，顯示這張圖片，下載？本身右鍵另存爲吧。既然echarts官方都這麼作了，我也就沒什麼可說的了。抱歉沒有找到解決全部瀏覽器的辦法。

5---w = window.open('about:blank',"new_win")， w.document.write("<img src="+imgBase64Url+">");

代碼奉上：

/**
 * 將圖表保存成圖片
 * 
 * @param myChart - 圖表對象
 * @param fileName - 保存後的文件名
 */
function saveChartImage(myChart1, fileName) {
    //建立一個新的容器放置圖表，源myChart1尺寸偏小。
    var div = document.createElement("div");
    div.style.width = "1024px";
    div.style.height = "768px";
    div.style.display = "none";
    $("#content").append(div);
    //先有容器，容器加到頁面中，再初始化圖表，不然可能出現問題。
    var myChart = echarts.init(div);
    var op = myChart1.getOption();
    //關閉圖表動畫效果，不然可能出現空白圖或僅有網格線狀況。
    op.animation = false;
    myChart.setOption(op);
    //設置延遲，給echarts渲染一點點時間，另地圖渲染爲異步。
    setTimeout(function(){
        if(myChart == null || myChart == undefined)
            art.dialog.through({content:"保存失敗！", width: 320, height: 120, lock: true,drag: false,ok: true});
        //將圖片數據轉換爲base64字符串, eg:data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABA
        var imgUrl = myChart.getDataURL();
        if(fileName == null || fileName == undefined || fileName == "") {
            var date = new Date();
            fileName = "ihyperdbChart_" + date.getTime();
        }
        
        if (!!window.ActiveXObject || "ActiveXObject" in window){ 
            //IE     
            if(window.atob){
                //IE十、IE11
                var blob = convertBase64UrlToBlob(imgUrl);
                navigator.msSaveBlob(blob, fileName+".png"); 
            }else{
                //IE9-
                var w = window.open('about:blank',"new_win");
                w.document.write("<img src="+imgUrl+">");
                w.document.title = "圖片";
            }
        }else{
            //Others
            var saveA = document.createElement("a");
            saveA.setAttribute("href", imgUrl);
            saveA.setAttribute("download", fileName + ".png");
            saveA.setAttribute("hidden", "hidden");
            document.body.appendChild(saveA);
            
            var saveImg = document.createElement("img");
            saveImg.setAttribute("src", imgUrl);
            saveA.appendChild(saveImg);
            
            saveImg.click();
        }
    },100);
}
/**
 * 將圖片Base64數據轉爲Blob數據
 * 
 * @param urlData - 圖片的Base64URL
 * @return blobData - 轉換後Blob
 */
function convertBase64UrlToBlob(urlData){
	//去掉url的頭，並轉換爲byte
	var bytes=window.atob(urlData.split(',')[1]);        
	//處理異常,將ascii碼小於0的轉換爲大於0
	var ab = new ArrayBuffer(bytes.length);
	var ia = new Uint8Array(ab);
	for (var i = 0; i < bytes.length; i++) {
		ia[i] = bytes.charCodeAt(i);
	}
	return new Blob( [ab] , {type : 'image/bmp'});
}