前台方法使用html2canvas将div转换为图片，点击完成，图片以Ajax Post的方式提交到后台接口。存储到文件目录下。
1.保存的图片效果：
2.前台代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<script src="Jscript/jquery-1.8.2.min.js"></script>
<script src="Html2canvas_JS/base64.js"></script>
<script src="Html2canvas_JS/canvas2image.js"></script>
<script src="Html2canvas_JS/html2canvas.min.js"></script>
</head>
<body>
<button ;
};
$(function () {
$('#btn_save').click(function () {
$('#btn_save').attr('disabled', 'disabled');
setTimeout(function () {
createImg();
},500);
setTimeout(function() {
alert(uploadImg());
},1500);
$('#btn_save').attr('disabled', false);
});
});
</script>
</body>
</html>
3.后台代码，一般处理文件UploadImg.ashx
public class UploadImg : IHttpHandler
{
public static void EnsureDirectory(string path)
{
if (!Directory.Exists(path))
{
Directory.CreateDirectory(path);
}
}
public void ImgCrop(byte[] bytes, string targetImgPath)
{
byte[] imgBytes = bytes;
FileStream fileStream = new FileStream(targetImgPath, FileMode.Create, FileAccess.Write);
using (BinaryWriter writer = new BinaryWriter(fileStream))
{
writer.Write(imgBytes);
}
fileStream.Close();
fileStream.Dispose();
}
public void ProcessRequest(HttpContext context)
{
string sourceFileName = context.Request["fileName"];
string file = context.Request["file"];
string guid = Guid.NewGuid().ToString();
string targetImgFileName = guid + "-" + sourceFileName;
string targetImgRelativeFolderStr = "\\Images\\Upload\\MapScreenshot";
EnsureDirectory(HttpContext.Current.Server.MapPath(targetImgRelativeFolderStr));
string targetImgRelativeFolder = HttpContext.Current.Server.MapPath(targetImgRelativeFolderStr);
string targetImgRelativePath = Path.Combine(targetImgRelativeFolderStr, targetImgFileName);
string targetImgPath = Path.Combine(targetImgRelativeFolder, targetImgFileName);
byte[] imgBytes = Convert.FromBase64String(file);
ImgCrop(imgBytes, targetImgPath);
context.Response.ContentType = "application/json";
context.Response.Write("{\"state\":\"success\",\"msg\":\"上传成功\"}");
}
}
4.需要的js文件：
jquery-1.8.2.min.js
base64.js
canvas2image.js
html2canvas.min.js