公司项目制作一个手写签名,由于是移动端,所以需要大屏手写,所以我结合和layui中的弹窗,在弹窗中创建canvas画布手写签名,然后保存成图片存到页面上给用户看,提交的时候再提交到服务器。
先给大家看一下效果图:
文章图片
HTML需要一个按钮控制弹出层,和一个显示图片的区域,这个我就不多说了,可以到layui文档上看按钮绑定弹出层的方法。图片显示显示区域的话一个img标签就好。Html代码如下:
<
div class="signature_img" style="width: 100%;
height: 150px;
display: none">
<
img style="height: 150px;
width: auto" src="" >
<
/div>
然后是layer方法中的弹出层信息的设置,在这里需要把canvas画布信息设置在content中,如果放在body中然后用content:$(#id)的方法引入也是可以的。重要的部分来了,打开的弹出层中存在canvas之后,要在layer的success方法中获得元素,否则会造成元素找不到的情况,画不出东西来。
代码如下:
var active = {
setTop: function(){
layer.open({
type: 0
,title: '签名'
,content: '<
div id="canvas">\n' +
'<
p id="clearCanvas">清除<
/p>\n' +
'<
p class="layui-layer-close" id="saveCanvas">保存<
/p>\n' +
'<
canvasid="canvas_id"><
/canvas>\n' +
'<
/div>'
,area:['100%','100%']
,success:function(layero, index){
new lineCanvas({
el: document.getElementById("canvas"),//绘制canvas的父级div
clearEl: document.getElementById("clearCanvas"),//清除按钮
saveEl: document.getElementById("saveCanvas"),//保存按钮
canvas:document.getElementById("canvas_id"),
//linewidth:1,//线条粗细,选填
//color:"black",//线条颜色,选填
//background:"#ffffff"//线条背景,选填
});
}
});
}
};
然后问题又来了,在签名的时候,还是没有效果,可是元素啥的都能找到,打印以下点触的位置,发现熟知很大,根本就不是我画的鼠标的位置,所以能确定的是,画是画出来了,看不见在哪里。是什么问题呢?因为我的是长页面,所以有滚动条,在签名的时候就发现滚动条跟着手指动来动去,所以随便滚动一下鼠标,当我把滚动条拉到最下面的时候,既然发现签名真的是在这里地方写了!!!
要解决这个问题,要控制弹出层出现的时候,滚动条是禁止滑动的,并且是显示的位置要是文档的最下面。所以我要用当前笔触的位置减掉滚动条上面的上面的位置,以便当我打开弹出层的时候就已经是最下面了,并且滚动条不会滑来滑去,书写方便。
控制滚动调滑动的代码也是加在layer方法中的success方法里面。是打开弹出层成功之后再控制不会滚动:
function unScroll() {
var top = $(document).scrollTop();
$(document).on('scroll.unable',function (e) {
$(document).scrollTop(top);
})
};
unScroll();
$(".layui-layer-close").click(function () {
$(document).unbind("scroll.unable");
})
然后以下是绘制签名的方法:
<
script>
function lineCanvas(obj) {
this.linewidth = 1;
this.color = "#000000";
this.background = "#ffffff";
for (var i in obj) {
this[i] = obj[i];
};
this.cxt = this.canvas.getContext("2d");
this.cxt.fillStyle = this.background;
this.canvas.width = document.documentElement.clientWidth-40;
//画布的宽度是设备的宽度,40是我要减去的宽度,你用的时候不需要。
this.canvas.height = 380;
//用以上同样的方法可以获得设备的高度,只是我根据我的项目设成380px;
this.cxt.strokeStyle = this.color;
//画笔的颜色
this.cxt.lineWidth = this.linewidth;
//线条的宽度
this.cxt.lineCap = "round";
//开始绘制
this.canvas.addEventListener("touchstart", function(e) {
this.cxt.beginPath();
this.cxt.moveTo(e.changedTouches[0].pageX-40, e.changedTouches[0].pageY-document.documentElement.scrollTop-82);
//document.documentElement.scrollTop是滚动条到顶部的距离。
}.bind(this), false);
//绘制中
this.canvas.addEventListener("touchmove", function(e) {
this.cxt.lineTo(e.changedTouches[0].pageX-40, e.changedTouches[0].pageY-document.documentElement.scrollTop-82);
this.cxt.stroke();
}.bind(this), false);
//结束绘制
this.canvas.addEventListener("touchend", function() {
this.cxt.closePath();
}.bind(this), false);
//清除画布
this.clearEl.addEventListener("click", function() {
this.cxt.clearRect(0, 0, this.canvas.width, this.canvas.height);
}.bind(this), false);
//保存图片,直接转base64
this.saveEl.addEventListener("click", function() {
var imgBase64 = this.canvas.toDataURL();
console.log(imgBase64);
//图片路径
$(".signature_img").show();
$(".signature_img img").attr("src",imgBase64);
//获取元素的src属性,并赋值图片的路劲。}.bind(this), false);
};
<
/script>
【移动web canvas手写签名结合layui弹窗制作全屏签名】以上就是结合layui框架的弹出层制作手写签名的全过程和代码。刚开始的时候去下载手写签名框架啥的,不单止需要引入的文件太多,也不是全屏的,不好用,还不如自己写的轻便。
推荐阅读
- JavaScript中的高阶函数详解
- C语言简明教程(十五)(文件输入输出工作原理和实例详解)
- C语言简明教程(十四)(存储类别、链接、内存管理和类型限定)
- JavaScript对象方法及this用法详解
- JavaScript变量作用域之间的关系详解
- Python break语句用法指南
- jQuery event.isDefaultPrevented()方法使用介绍
- PHP | dns_check_record()函数用法介绍
- CSS预处理器SASS用法介绍