htmlCanvas实现截图下载到本地
//canvas参数据设置
function screenShot(copyDom, cb) {
var width = copyDom.width();//dom宽
var height = copyDom.height();//dom高
var scale = 2;//放大倍数
var canvas = document.createElement("canvas");
canvas.width = width * scale;//canvas宽度
canvas.height = height * scale;//canvas高度
var content = canvas.getContext("2d");
content.scale(scale, scale);
var rect = copyDom.get(0).getBoundingClientRect();//获取元素相对于视察的偏移量
content.translate(-rect.left, -rect.top);//设置context位置，值为相对于视窗的偏移量负值，让图片复位
html2canvas(copyDom, {
allowTaint: true,
tainTest: true,
scale: scale,
canvas: canvas,
width: width,
heigth: height,
onrendered: function (canvas) {
if (cb) {
//copyDom.css('display', 'none');
cb(canvas.toDataURL("image/png", 1), width, height);
}
}
});
}
//文件下载
function exportCanvasAsPNG(canvas,fileName) {
var MIME_TYPE = "image/png";
var imgURL = canvas;
var dlLink = document.createElement('a');
dlLink.download = fileName;
dlLink.href = imgURL;
dlLink.dataset.downloadurl = [MIME_TYPE, dlLink.download, dlLink.href].join(':');
document.body.appendChild(dlLink);
dlLink.click();
document.body.removeChild(dlLink);
}
//调用
$("#madeImage").click(function () {
screenShot($(".content"), function (canvas, width, height) {
exportCanvasAsPNG(canvas, new Date().getTime()+"_报价表.png");
});
});
//保存图片到服务器并下载（适用手机端）
function saveimg(base64, width, height) {
var img = new Image();
var data = { "action": "saveimg", "width": width, "height": height, "datas": base64 };
var path = "";
$.ajax({
type: "POST",
url: "../ajax/weChart.ashx",
data: data,
success: function (msg) {
if (msg != "") {
path = msg;
var dlLink = document.createElement('a');
var arr = msg.split("/");
var filename = arr[arr.length - 1];
var MIME_TYPE = "image/png";
dlLink.download = filename;
dlLink.href = msg;
dlLink.dataset.downloadurl = [MIME_TYPE, dlLink.download, dlLink.href].join(':');
document.body.appendChild(dlLink);
dlLink.click();
document.body.removeChild(dlLink);
}
},
complete: function (jqXHR, textStatus) {
}
});
}
//服务器后台接收保存
///
/// 生成报价表图片保存
///
///
protected void SaveImg(HttpContext context)
{
string errorMsg = "";
string result = "";
string dataURL = Utils.ReqFromParameter("datas").ToString();
string width= Utils.ReqFromParameter("width").ToString();
string height = Utils.ReqFromParameter("height").ToString();
string path = "/UploadFiles/Mobile/QuotationSheet/";
string filename = "";//声明一个string类型的相对路径
String base64 = dataURL.Substring(dataURL.IndexOf(",") + 1); //将‘，’以前的多余字符串删除
System.Drawing.Bitmap newImage = null;//定义一个Bitmap对象，接收转换完成的图片
try//会有异常抛出，try，catch一下
{
String inputStr = base64;//把纯净的Base64资源扔给inpuStr,这一步有点多余
byte[] arr = Convert.FromBase64String(inputStr);//将纯净资源Base64转换成等效的8位无符号整形数组
Bitmap bmp = null;
Graphics draw = null;
DateTime now = DateTime.Now;
string dateStr = now.Year.ToString() + now.Month.ToString() + now.Day.ToString() + now.Hour.ToString() + now.Minute.ToString() + now.Second.ToString();
filename = "报价表_" + dateStr+".png";//所要保存的相对路径及名字
string tmpRootDir = context.Request.MapPath("~/") + path; //获取程序根目录
string imagesurl2 = tmpRootDir + filename.Replace(@"/", @"\"); //转换成绝对路径
using (System.IO.MemoryStream ms = new System.IO.MemoryStream(arr))//转换成无法调整大小的MemoryStream对象
{
using (bmp = new System.Drawing.Bitmap(ms))
{
newImage = new System.Drawing.Bitmap(int.Parse(width),int.Parse(height), PixelFormat.Format16bppRgb555);
using (draw = Graphics.FromImage(newImage))
{
draw.DrawImage(bmp, 0, 0);
}
}
}
if (!Directory.Exists(tmpRootDir))
{
Directory.CreateDirectory(tmpRootDir);
}
else
{
//删除旧图片
DelectDir(tmpRootDir);
}
newImage.Save(imagesurl2, ImageFormat.Png);
}
catch (Exception ex)
{
errorMsg = ex.Message;
EventLogHelper.WriteLogs("log", "SaveImg", errorMsg);
newImage.Dispose();
}
if (errorMsg == "")
{
result = path + filename;
}
context.Response.Write(result);
context.Response.End();
}
///
/// 删除指定路径的文件夹与文件
///
///
public static void DelectDir(string srcPath)
{
try
{
DirectoryInfo dir = new DirectoryInfo(srcPath);
FileSystemInfo[] fileinfo = dir.GetFileSystemInfos(); //返回目录中所有文件和子目录
foreach (FileSystemInfo i in fileinfo)
{
if (i is DirectoryInfo) //判断是否文件夹
{
DirectoryInfo subdir = new DirectoryInfo(i.FullName);
subdir.Delete(true); //删除子目录和文件
}
else
{
File.Delete(i.FullName); //删除指定文件
}
}
}
catch (Exception e)
{
throw;
}
}