电脑签名效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>签名</title>
<style>
* {
margin: 0;
padding: 0;
}
#canvas {
border: 1px solid black;
}
</style>
<script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="./js/xadmin.js"></script>
<script type="text/javascript" src="./data/sensor.js"></script>
<script src="js/jquery.min.js"></script>
</head>
<body>
<div class="container">
<fieldset class="layui-elem-field" style="width: 610px; margin-left: 5px;">
<legend style="font-size: 12px;">预览</legend>
<div class="layui-field-box">
<div class="imgs" id="imgs">
<img id="imgOld" src="" style="height: 50px; width: 200px;"/>
</div>
</div>
</fieldset>
<canvas id="canvas" width="610px" height="280px" style="margin-left: 5px;" ></canvas>
<div>
<button id="clear">清空签名</button>
线条粗细
<select id="selWidth">
<option value="2">2</option>
<option value="4">4</option>
<option value="6">6</option>
<option value="9">9</option>
</select>
线条颜色
<select id="selColor">
<option value="red">red</option>
<option value="blue">blue</option>
<option value="pink">pink</option>
<option value="orange">orange</option>
</select>
<button id="imgInfo">保存签名</button>
</div>
<!-- <div class="imgs" id="imgs"></div>-->
</div>
</body>
<script type="text/javascript">
//1.获取canvas
var myCanvas = document.getElementById("canvas");
//获取2d对象
var ctx = myCanvas.getContext("2d");
//清空画布
var clear = document.getElementById("clear");
//线条
var selWidth = document.getElementById("selWidth");
// 颜色
var selColor = document.getElementById("selColor");
// 保存签名
var imgInfo = document.getElementById("imgInfo");
// 保存的盒子
var imgs = document.getElementById("imgs");
//控制线条是否画
var isMouseMove = false;
//线条位置
var lastX, lastY;
var widthVal = selWidth[0].value, colorVal = selColor[0].value;
window.onload = function () {
initCanvas();
};
//初始化
function initCanvas() {
//PC端
var down = (e) => {
isMouseMove = true;
drawLine(
event.pageX - myCanvas.offsetLeft,
event.pageY - myCanvas.offsetTop,
false
);
};
let move = (e) => {
if (isMouseMove) {
drawLine(
event.pageX - myCanvas.offsetLeft,
event.pageY - myCanvas.offsetTop,
true
);
}
};
let up = (e) => {
isMouseMove = false;
};
let leave = (e) => {
isMouseMove = false;
};
myCanvas.addEventListener("mousedown", down);
myCanvas.addEventListener("mousemove", move);
myCanvas.addEventListener("mouseup", up);
myCanvas.addEventListener("mouseleave", leave);
}
//画线
function drawLine(x, y, isT) {
if (isT) {
ctx.beginPath();
ctx.lineWidth = widthVal; //设置线宽状态
ctx.strokeStyle = colorVal; //设置线的颜色状态
ctx.lineCap = 'round'
ctx.lineJoin = "round";
ctx.moveTo(lastX, lastY);
ctx.lineTo(x, y);
ctx.stroke();
ctx.closePath();
}
// 每次移动都要更新坐标位置
lastX = x;
lastY = y;
}
//清空画图
function clearCanvas() {
imgs.innerHTML = ""
ctx.beginPath();
ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
ctx.closePath(); //可加入，可不加入
}
//线条粗细
function lineCrude() {
let activeIndex = selWidth.selectedIndex;
widthVal = selWidth[activeIndex].value;
}
//改变颜色
function setColor() {
let activeIndex = selColor.selectedIndex;
colorVal = selColor[activeIndex].value;
}
//保存图片
function saveImgInfo() {
var images = myCanvas.toDataURL('image/png');
imgs.innerHTML = `<img id="image1" src='${images}'>`
uploadAutograph();
}
clear.addEventListener("click", clearCanvas);
selWidth.addEventListener("change", lineCrude);
selColor.addEventListener("change", setColor);
imgInfo.addEventListener("click", saveImgInfo);
function dataURLtoFile(dataurl, filename) {
var arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, {type:mime});
}
//上传签名
function uploadAutograph(imgData) {
let formData = new FormData();
let imagesName=new Date().getUTCMinutes()+".png";
let fileData=document.getElementById('image1');
let fileOfBlob=dataURLtoFile(fileData.src,imagesName);
formData.append("file",fileOfBlob);
let url=sensorServer.getUploadFileUrl1();
$.ajax({
url:url,
type:"post",
data:formData,
processData:false,
contentType:false,
success:function(data){
console.log(JSON.stringify(data));
if(data.msg=="操作成功"&&data.data!=null){
let uploadSuccessData=data.data;
if(uploadSuccessData!=null) {
let fileName=imagesName ; //;document.getElementById('file_1').files[0].name;
let serverUrl=uploadSuccessData.url;
let params={"fileUrl":serverUrl,"fileName":fileName};
let parm={"id":curInfo.id,"autographAttachmentId":uploadSuccessData.attachmentId};
let result=sensorServer.updateAccount(parm);//上传保存数据逻辑
if(result==1)
{
layer.alert("上传成功！", {
icon: 6
},
function () {
//关闭当前frame
xadmin.close();
// 可以对父窗口进行刷新
xadmin.father_reload();
});
} else
{
layer.alert("上传失败！", {
icon: 6
},
function () {
//关闭当前frame
xadmin.close();
// 可以对父窗口进行刷新
xadmin.father_reload();
});
}
}else{
layer.msg("保存失败！");
}
}else{
alert(JSON.stringify(data));
layer.msg("上传失败！");
}
},
error:function(e){
alert("错误！！");
}
});
}
function getQueryVariable(variable)
{
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == variable){return pair[1];}
}
return(false);
}
var curInfo;
$(function () {
let pid = getQueryVariable("id");
var accountInfo = sensorServer.getAccountInfoById({"id": parseInt(pid)});
curInfo=accountInfo;
if(curInfo.autographAttachmentUrl!=null&&curInfo.autographAttachmentUrl!=""){
$("#imgOld")[0].src=curInfo.autographAttachmentUrl;
}
});
</script>
</html>
