Canvas+jQuery Ajax+ASP.Net 实现网页手绘图片上传

思路

HTML中添加canvas标签，用jQuery采用Ajax的方式上传到ASP.Net服务端，服务端使用一般处理程序（ashx）接收并保存成图片，支持网页

HTML

<canvas height="150px" width="300px" id="pic"></canvas>

JavaScript

步骤：先获取canvas对象，然后new一个FormData对象，canvas有一个异步方法toBlob()可将canvas的内容转化为Blob对象，同意毁掉方法，将转化后的Blob对象追加到FormData中，通过Ajax上传到ASP.Net的服务端中

let pic = document.getElementById("pic");
let imgdata = new FormData();
pic.toBlob(function(picBlob){
	imgdata.append("picBlob",picBlob);
 	$.ajax({
  		url: "./UpdataPicture.ashx",
  		data: imgdata,
  		type: "POST",
  		contentType: false,
  		processData: false,
  		success: function (picResult) {
			console.log(picResult);
		}
 	});
});

下面canvas手绘板的签名的实现，主要添加触摸事件

setSignatureCanvas("pic");
function setSignatureCanvas(id) {
    //拿到画布对象
    var canvas = document.getElementById(id);
    //拿到画笔
    var content = canvas.getContext("2d");
    //设置画笔的样式
    content.strokeStyle = "#000";
    content.lineWidth = 1;
    content.lineCap = 'round';
    content.lineJoin = 'round';
    content.shadowBlur = 1;
    content.shadowColor = '#000';
    //开始一条路径
    content.beginPath();
    //添加触摸事件
    canvas.addEventListener("touchstart", function (e) {
        content.beginPath();
        var touch = e.targetTouches[0];
        var x = touch.pageX - canvas.offsetLeft;
        var y = touch.pageY - canvas.offsetTop;
        content.moveTo(x, y);
    });
    canvas.addEventListener("touchmove", function (event) {
        event.preventDefault();
        var touch = event.targetTouches[0];
        var x = touch.pageX - canvas.offsetLeft;
        var y = touch.pageY - canvas.offsetTop;
        content.lineTo(x, y);
        content.stroke();
    });
}

ASP.Net ashx

步骤：在请求对象中拿到文件对象，将文件对象通过流的方式保存到本地

public void ProcessRequest(HttpContext context)
{
	HttpPostedFile pic =  httpContext.Request.Files["picBlob"];
	ToImgFile(pic,"D:\pic.png");
	context.Response.Write("保存成功！");
}
public void ToImgFile(HttpPostedFile httpPostedFile, String filePath)
{
	int contentLength = httpPostedFile.ContentLength;
	byte[] fileBytes = new byte[contentLength];
	Stream fileStream = httpPostedFile.InputStream;
	fileStream.Read(fileBytes, 0, contentLength);
	String filePathInfor = Path.GetDirectoryName(filePath);
	if (!Directory.Exists(filePathInfor))
	{
		Directory.CreateDirectory(filePathInfor);
	}
	using (FileStream stream = File.Create(filePath))
	{
	stream.Write(fileBytes, 0, fileBytes.Length);
		stream.Close();
	}
}

撒花完结