【js实现手写签名板】canvas

项目多个功能模块都用到签名，所以进行了封装，需要用到的签名的地方，只需要调用一下封好的signature函数，即可返回保存的签名照片（格式：base64，也可自行修改）

<!-- 项目的html页面 -->
<style>.popverBox{position: relative;height: 500px;}.signSure{position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);width: 80%;background: #fff;border-radius: 16px;padding: 20px 12px 28px 12px;}.topTitle{margin: 20px 0 12px 12px;font-size: 16px;}.whiteBord{width: 300px;height: 400px;border: 1px solid #eee;background: #f6f6f6;background: #f6f6f6;margin: 0 auto;border-radius: 4px;margin-bottom: 12px;}.bottomBtnBox{padding: 0 7px;display: flex;justify-content: space-between;}.primaryBtn{width: 48%;height: 40px;color: #666;border: 1px solid #ccc;border-radius: 4px;background: #fff;}.activeBtn{background: #315294;color: #fff;border: none;}
</style>
<div class="popverBox"><div id="signSure" class="signSure"><div class="topTitle">请写下您的名字</div><canvas class="whiteBord" id="whiteBord">您的浏览器不支持canvas技术,请升级浏览器!</canvas><div class="bottomBtnBox"><button class="primaryBtn" id="againWrite">重写</button><button class="primaryBtn activeBtn" id="sureWrite">确定</button></div></div></div>
<script src="./signature.js"></script>
<script>function sureWriteCallback(imageBase64){console.log(imageBase64)// 签名完成后的的逻辑代码...}let params = {whiteBord:'whiteBord',//canvas标签的id名称againWrite:'againWrite',//重写按钮id名sureWrite:'sureWrite',//确认按钮id名whiteBordPtions:{},//白板的配置项（空对象时取默认值）sureWriteCallback,// 签名完成后的回调函数}signature(params)  // signature.js里封装好的函数，把参数传进去，调用一下即可
</script>

signature.js

/** * @param {*} params {}* /***  whiteBord 白板盒子canvas id名*  popverBox 确认签字以后想要隐藏掉的盒子*  againWrite 重写按钮id名*  sureWrite 确定按钮id名*  whiteBordPtions 白板配置项*  sureWriteCallback 确定签名之后的回调函数* @returns 签名的图片：格式base64*/
function signature(params) {let {whiteBord,againWrite,sureWrite,whiteBordPtions,sureWriteCallback} = paramslet whiteBoardDom = document.getElementById(whiteBord);let againWriteBtn = document.getElementById(againWrite)let sureWriteBtn = document.getElementById(sureWrite)let writeCanvas;let imageBase64=''againWriteBtn.addEventListener("click", function () {drawClear()})sureWriteBtn.addEventListener('click', function () {savePict()})function WriteFont(options) {let obj = {canvas: whiteBoardDom,context: whiteBoardDom.getContext("2d"),isWrite: false, //是否开始canvasWidth: 300, //canvas宽高canvasHeight: 400,lastPoint: {}, //writeWidth: 2, //基础轨迹宽度writeColor: '#000', // 轨迹颜色}for (let name in options) {obj[name] = options[name];}/*** 轨迹宽度*/this.setLineWidth = function () {let nowTime = new Date().getTime();obj.lastWriteTime = nowTime;obj.context.lineWidth = obj.writeWidth;}/*** 绘制轨迹*/this.writing = function (point) {obj.context.beginPath();obj.context.moveTo(obj.lastPoint.x, obj.lastPoint.y);obj.context.lineTo(point.x, point.y);this.setLineWidth();obj.context.stroke();obj.lastPoint = point;obj.context.closePath();}/*** 轨迹样式*/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;this.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);obj.context.restore();}/*** 初始化画板*/this.canvasInit = function () {whiteBoardDom.width = obj.canvasWidth;whiteBoardDom.height = obj.canvasHeight;emptyCanvas = whiteBoardDom.toDataURL("image/png");}let that = this/**======================事件绑定===========================**/whiteBoardDom.addEventListener('touchstart', function (e) {let point = {x: e.touches[0].pageX - 35,y: e.touches[0].pageY - 60};that.writeBegin(point);point = {x: point.x / obj.canvasWidth * 330,y: point.y / obj.canvasHeight * 170};});whiteBoardDom.addEventListener('touchend', function (e) {that.writeEnd();});whiteBoardDom.addEventListener('touchmove', function (e) {if (obj.isWrite) {let point = {x: e.touches[0].pageX - 35,y: e.touches[0].pageY - 60};that.writing(point);point = {x: point.x / obj.canvasWidth * 330,y: point.y / obj.canvasHeight * 170};}});this.canvasInit();this.canvasClear();obj.control = {clearCanvas: that.canvasClear};this.option = obj;}/*** 初始化调用* 设置参数*/writeCanvas = new WriteFont('whiteBord', whiteBordPtions);function savePict() {imageBase64 = whiteBoardDom.toDataURL("image/png"); //base64writeCanvas.option.control.clearCanvas();sureWriteCallback(imageBase64)}function drawClear() {writeCanvas.option.control.clearCanvas();}
}

【js实现手写签名板】canvas相关推荐

在线签名、canvas手写在线签名——小程序端实现在线签名，手写电子签名canvas
在线签名.canvas手写在线签名--小程序端实现在线签名,手写电子签名canvas 近期公司准备接一个政府的小项目,里头有一个在线签名的需求,老板让我研究一下.于是就...开始思考: 在线手写签名, ...
JS的手写TRIM函数
JS的手写TRIM函数转载于:https://www.cnblogs.com/vibratea/archive/2009/07/24/1530109.html
vue+js纯手写日历（包含农历，节假日）
vue+js纯手写日历(包含农历,节假日) 使用的js 地址 dataChange.js 插件使用了elementui //完整代码 <template><div><di ...
纯JS+CSS手写日历
介绍今天带来一个纯JS+css手写的日历, 一开始先显示当前日期,比如下方25日就是当前日期会有较深蓝色背景色,鼠标指着的日期是下方图片14日的淡蓝色背景色上面显示日期,可左右选择上个月或者下个月 ...
手写签名板 android,Android 简易签名板
一个简单的练习,手写签名后,可以清空,保存,然后再相册进行查看简易签名板有5个知识点,需要注意: 在SignatureView的onTouchEvent()方法中,利用mPath.quadTo() ...
丝滑流畅的手写签名 canvas 2d
在最近的小程序项目中,设计师又给我出难题了,需要在小程序里面实现一个手写签名功能,完成后将签名生成文件,上传的服务端去.手写签名不难,难在居然要我生成 svg,还有将签名功能搞得和画板一样,我是不能忍 ...
JS如何手写new（一看就懂）
如以下构造函数,使用new关键字: function One(name, age) {this.name = name;this.age = age; } let a = new One(); con ...
【JS 纯手写轮播图代码】
轮播图实现首先需要在同级目录下创建img文件夹,用以储存你需要轮播的图片,注意设置好图片的宽度,以免出现空白区域.然后就可以愉快地实现轮播功能啦~ // An highlighted block & ...
风尚云网面试题系列—JS高频手写代码题
目录实现 Promise 实现一个 call 函数实现一个 apply 函数实现一个 bind 函数浅拷贝.深拷贝的实现实现一个防抖函数实现一个节流函数柯里化函数的实现 Object.c ...

【js实现手写签名板】canvas

项目多个功能模块都用到签名，所以进行了封装，需要用到的签名的地方，只需要调用一下封好的signature函数，即可返回保存的签名照片（格式：base64，也可自行修改）

signature.js

【js实现手写签名板】canvas相关推荐

最新文章

热门文章