<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>签名板(支持移动端)</title>
</head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#canvas {
/*width: 100%;*/
display: block;
border: 1px solid #e4e4e4;
margin: 10px auto;
}
#clear,
#clear1,
#save {
margin: 0 auto;
display: inline-block;
padding: 5px 10px;
width: 50px;
height: 40px;
line-height: 40px;
border: 1px solid #eee;
background: #e1e1e1;
border-radius: 10px;
text-align: center;
margin: 20px auto;
cursor: pointer;
}
.agreement{
padding-left: 10px;
line-height: 32px;
}
.agreement h5{
text-align: center;
}
#canvas{
width: 1200px;
height: 400px;
margin: 0 auto;
}
.phone{
color: #2577f6;
}
</style>
<body data-ext-version="1.4.2">
<div class="agreement">
<h5>水电气暖同步过户申请须知</h5>
<div>1.如需自来水、电力、暖气、燃气同步过户请扫描“气、暖同步过户”二维码或关注郑州市不动产登记中心微信公众号申请。</div>
<div>2.申请自来水、电力、暖气、燃气同步过户的用户请及时查看郑州市不动产微信公众号个人中心的过户结果。</div>
<div>3.自来水、电力、暖气、燃气同步过户申请未通过的，请根据无法过户原因进行处理。</div>
<div>4.自来水同步过户审核时限为3个工作日，办结时限为7个工作日，此项业务承诺时限为10个工作日办结，联系电话:<span class="phone">67680000</span></div>
<div>5.电力同步过户审核时限为2个工作日，办结时限为(居民)3个工作日，(非居民)6个工作日，此项业务承诺时限为5-8个工作日办结，联系电话:<span class="phone">68806880</span></div>
<div>6.燃气同步过户审核时限为2个工作日，办结时限为2个工作日，此项业务承诺时限为4个工作日办结，联系电话:<span class="phone">68855777</span></div>
<div>7.暖气同步过户审核时限为1个工作日，办结时限为2个工作日，此项业务承诺时限为3个工作日办结，联系电话:<span class="phone">68890222</span></div>
<div> 8.水电气暖同步过户审核单位为水电气暖各相关单位，具体业务由各相关单位负责解释。</div>
</div>
<div style="text-align: center;line-height: 40px;">请进行电子签名</div>
<canvas id="canvas">
您的浏览器不支持canvas技术,请升级浏览器!
</canvas>
<div style="text-align: center">
<span id="clear">清空</span>
<span id="save">保存</span>
</div>
</body>
<script type="text/javascript">
function WriteFont(id, options) {
var self = this;
this.canvas = document.getElementById(id);
var obj = {
canvas: this.canvas,
context: this.canvas.getContext("2d"),
isWrite: false, //是否开始
lastWriteTime: -1,
lastWriteSpeed: 0,
lastWriteWidth: 0,
canvasWidth: 1200, //canvas宽高
canvasHeight:400,
isShowBorder: true, //是否显示网格
bgColor: '#fff', //背景色
borderWidth: 2, // 网格线宽度
borderColor: "#fff", //网格颜色
lastPoint: {}, //
writeWidth: 2, //基础轨迹宽度
maxWriteWidth: 30, // 写字模式最大线宽
minWriteWidth: 1, // 写字模式最小线宽
writeColor: '#000', // 轨迹颜色
isWriteName: false //签名模式
}
for (var name in options) {
obj[name] = options[name];
}
/**
* 轨迹宽度
*/
this.setLineWidth = function () {
var nowTime = new Date().getTime();
var diffTime = nowTime - obj.lastWriteTime;
obj.lastWriteTime = nowTime;
var returnNum = obj.minWriteWidth + (obj.maxWriteWidth - obj.minWriteWidth) * diffTime / 30;
if (returnNum < obj.minWriteWidth) {
returnNum = obj.minWriteWidth;
} else if (returnNum > obj.maxWriteWidth) {
returnNum = obj.maxWriteWidth;
}
returnNum = returnNum.toFixed(2);
//写字模式和签名模式
if (obj.isWriteName) {
obj.context.lineWidth = obj.writeWidth;
} else {
obj.context.lineWidth = obj.lastWriteWidth = obj.lastWriteWidth / 4 * 3 + returnNum / 4;
}
}
/**
* 绘制轨迹
*/
this.writing = function (point) {
obj.context.beginPath();
obj.context.moveTo(obj.lastPoint.x, obj.lastPoint.y);
obj.context.lineTo(point.x, point.y);
self.setLineWidth();
obj.context.stroke();
obj.lastPoint = point;
obj.context.closePath();
console.log('obj====', this.canvas.toDataURL("image/png"));
}
/**
* 轨迹样式
*/
this.writeContextStyle = function () {
obj.context.beginPath();
obj.context.strokeStyle = obj.writeColor;
obj.context.lineCap = 'round';
obj.context.lineJoin = "round";
}
/**
* 写开始
*/
this.writeBegin = function (point) {
obj.isWrite = true;
obj.lastWriteTime = new Date().getTime();
obj.lastPoint = point;
self.writeContextStyle();
}
/**
* 写结束
*/
this.writeEnd = function () {
obj.isWrite = false;
}
/**
* 清空画板
*/
this.canvasClear = function () {
obj.context.save();
obj.context.strokeStyle = '#fff';
obj.context.clearRect(0, 0, obj.canvasWidth, obj.canvasHeight);
if (obj.isShowBorder && !obj.isWriteName) {
obj.context.beginPath();
var size = obj.borderWidth / 2;
//画外面的框
obj.context.moveTo(size, size);
obj.context.lineTo(obj.canvasWidth - size, size);
obj.context.lineTo(obj.canvasWidth - size, obj.canvasHeight - size);
obj.context.lineTo(size, obj.canvasHeight - size);
obj.context.closePath();
obj.context.lineWidth = obj.borderWidth;
obj.context.strokeStyle = obj.borderColor;
obj.context.stroke();
//画里面的框
obj.context.moveTo(0, 0);
obj.context.lineTo(obj.canvasWidth, obj.canvasHeight);
obj.context.lineTo(obj.canvasWidth, obj.canvasHeight / 2);
obj.context.lineTo(obj.canvasWidth, obj.canvasHeight / 2);
obj.context.lineTo(0, obj.canvasHeight / 2);
obj.context.lineTo(0, obj.canvasHeight);
obj.context.lineTo(obj.canvasWidth, 0);
obj.context.lineTo(obj.canvasWidth / 2, 0);
obj.context.lineTo(obj.canvasWidth / 2, obj.canvasHeight);
obj.context.stroke();
}
obj.context.restore();
}
/**
* 保存图片 格式base64
*/
this.saveAsImg = function () {
var image = new Image();
image.src = this.canvas.toDataURL("image/png");
if (image.src == this.emptyCanvas) {
alert('请先书写')
} else {
console.log('提交的内容===>', image.src)
}
};
/**
* 初始化画板
*/
this.canvasInit = function () {
this.canvas.width = obj.canvasWidth;
this.canvas.height = obj.canvasHeight;
this.emptyCanvas = this.canvas.toDataURL("image/png");
}
/**======================事件绑定===========================**/
this.canvas.addEventListener('mousedown', function (e) {
var point = {
x: e.offsetX || e.clientX,
y: e.offsetY || e.clientY
};
self.writeBegin(point);
});
this.canvas.addEventListener('mouseup', function (e) {
var point = {
x: e.offsetX,
y: e.offsetY
};
self.writeEnd(point);
});
this.canvas.addEventListener('mouseleave', function (e) {
var point = {
x: e.offsetX,
y: e.offsetY
};
self.writeEnd(point);
});
this.canvas.addEventListener('mousemove', function (e) {
if (obj.isWrite) {
var point = {
x: e.offsetX,
y: e.offsetY
};
console.log('point===',point);
self.writing(point);
}
});
this.canvasInit();
this.canvasClear();
this.option = obj;
obj.control = {
clearCanvas: self.canvasClear
};
}
/**
* 初始化调用
* 设置参数
*/
var writeCanvas = new WriteFont('canvas', {
borderWidth: 10,
writeWidth: 3,
borderColor: '#ff6666',
isWriteName: true //签名模式
});
document.getElementById('clear').onclick = function () {
writeCanvas.option.control.clearCanvas();
};
document.getElementById('save').onclick = function () {
writeCanvas.saveAsImg()
};
</script>
</html>```电子签名(支持移动端)
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
相关阅读更多精彩内容
- 参考链接:https://blog.csdn.net/qq_33270001/article/details/10...
- 使用场景： 用户需要扫一个二维码， 弹出输入框，输入用户名， 生成相应用户责任状。 在责任状底下要有能电子签名功能...
- Adobe Acrobat Pro是全球最专业的PDF编辑与管理工具，由Adobe公司开发。它不仅支持PDF的阅读...
