canvas signature save

<div id="signature" style="display: none;">
	<canvas id="canvas"></canvas>
<!--	<button id="button" >清除画面</button>-->
<!--	<button id="saveButton" >保存</button>-->
</div>
 <button id="saveButton" >打开签名</button>
<script>
	var canvasx=canvas.getBoundingClientRect().left;
	var canvasy=canvas.getBoundingClientRect().top;
	var canvas=document.getElementById("canvas");
	var context=canvas.getContext("2d");
	canvas.width=500;
	canvas.height=400;
	context.fillStyle="rgb(0,0,0)"; // 设置字体颜色
	canvas.addEventListener("mousedown",downfun);
	canvas.addEventListener("mousemove",movefun);
	canvas.addEventListener("mouseup",upfun);
	//canvas.οnmοusedοwn=function(){};
	//canvas.οnmοusedοwn=function(){};
	//canvas.οnmοusedοwn=function(){};
	var startx;   //起始坐标x
	var starty;  //起始坐标y
	var endx;   //结束坐标x
	var endy;   //结束坐标y
	context.lineWidth=3; //设置线宽
	var offon=false;   //锁定开关
	//鼠标按下
	function downfun(e){
      
      
	   // 每次开始签名或者在弹出框移动之后都需要重新获取画布的位置
		canvasx=canvas.getBoundingClientRect().left;
		canvasy=canvas.getBoundingClientRect().top;
		offon=true;
		startx=e.clientX-canvasx;
		starty=e.clientY-canvasy;
	}
	//鼠标移动
	function movefun(e){
      
      
		if (offon==true){
      
      
			context.beginPath();
			endx=e.clientX-canvasx;
			endy=e.clientY-canvasy;
			context.moveTo(startx,starty);
			context.lineTo(endx,endy);
			context.stroke();
			startx=endx;
			starty=endy;
		}
	}
	//鼠标离开
	function upfun(){
      
      
		offon=false;
		context.closePath();
	}
	//清除画面
	document.getElementById("button").onclick=function(){
      
      
		context.clearRect(0,0,canvas.width,canvas.height);
	}

	document.getElementById("saveButton").onclick = function(){
      
      
		saveButton()
	}
	document.getElementById("button").onclick=function(){
      
      
	 // 使用layer 弹出
	 layer.open({
      
      
		     type: 1, // 1 html元素，2，url地址等。。
			 title:'用户签名',
			 area:['510px', '490px'],
			 closeBtn :1,//右上角的关闭按钮取消0，1
			 resize:false, // 是否拖拉伸缩
			 content: $("#signature"),
			 btn:['保存签名','清空签名','取消'],
			 btn1: function (index,layero) {
      
      
				 saveButton()
				 layer.close(index);
			 },
			 btn2: function(index,layero){
      
      
				 $("#button").click();
				 var canvas=document.getElementById("canvas");
				 var context=canvas.getContext("2d");
				 context.clearRect(0,0,canvas.width,canvas.height);
				 return false;
			 },
			 end: function(index){
      
      
				 $("#signature").hide();
				 layer.close(index);
			 }
		 })
	}
	function saveButton() {
      
      
	   // 可以直接使用canvas，但是由于我真实环境无法获取，所以直接用id获取
		var canvas=document.getElementById("canvas");
		var context=canvas.getContext("2d");
		 // 获取base64编码的图片，传入后台处理保存即可，或者在前台处理转成file再上传
		let base64 = canvas.toDataURL()
		$.post("/a/sys/file/webupload/uploadSignUser",{
      
      id:$("#userIdm").val(),base: base64},function (res) {
      
      
			layer.msg(res.msg);
			context.clearRect(0,0,canvas.width,canvas.height);
			$("#signature").hide()

		});
	}

</script>