方法一:
function downloadImpByChart(chartId,name) {
var url = getFullCanvasDataURL(chartId);
var link = document.createElement('a');
link.href = url;
link.download = name+".png";
link.click();
};
//将图形转成base64的图片
function getFullCanvasDataURL(divId){
//将第一个画布作为基准。
var baseCanvas = $("#"+divId).find("canvas").first()[0];
if(!baseCanvas){
return false;
};
var width = baseCanvas.width;
var height = baseCanvas.height;
var ctx = baseCanvas.getContext("2d");
//遍历,将后续的画布添加到在第一个上
$("#"+divId).find("canvas").each(function(i,canvasObj){
if(i>0){
var canvasTmp = $(canvasObj)[0];
ctx.drawImage(canvasTmp,0,0,width,height);
}
});
//获取base64位的url
return baseCanvas.toDataURL();
}
方法二
前端JS
function downLoadImg () {
var picInfo = PageData.Chart4.getDataURL();
var stmpArr = picInfo.split(',')
var base64string = stmpArr[1];
var FileName = "克重分布.png";
var OpenUrl = "@Url.Action("DownLoadImg")" + "?ran=" + new Date().getTime();
//alert(filename);
var newForm = document.createElement("form");
newForm.id = "FromDownFile"
newForm.style.display = 'none';
//alert(OpenUrl);
newForm.action = OpenUrl;
newForm.method = "post";
var newInput = document.createElement("input");
newInput.type = "text";
newInput.name = "base64string";
newInput.id = "base64string";
newInput.value = base64string;
newForm.appendChild(newInput);
newInput = document.createElement("input");
newInput.type = "text";
newInput.name = "FileName";
newInput.id = "FileName";
newInput.value = FileName;
newForm.appendChild(newInput);
document.body.appendChild(newForm);
$("#FromDownFile").submit();
$("#FromDownFile").remove();
}
后端
[HttpPost]
public void DownLoadImg(string base64string,string FileName)
{
byte[] b = Convert.FromBase64String(base64string);
MemoryStream ms = new MemoryStream(b);
Response.ContentEncoding = System.Text.Encoding.GetEncoding("UTF-8");
string strTemp = System.Web.HttpUtility.UrlEncode(FileName, System.Text.Encoding.UTF8);
Response.AddHeader("Content-Disposition", "attachment;filename=" + strTemp);
Response.BinaryWrite(ms.ToArray());
Response.Flush();
Response.End();
}