<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>
캔버스 서명 저장
추천
출처blog.csdn.net/weixin_43051544/article/details/130221891
추천
행