js 保存图片到本地

摘要: js 保存图片到本地，echarts，img.src.click, navigator.msSaveBlob, window.open

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