js 保存图片到本地

2019独角兽企业重金招聘Python工程师标准>>>

图片来源是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){
                //IE10、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'});
}

 

转载于:https://my.oschina.net/u/2462382/blog/753364