手写签名软件手机版下载 手写签名软件
【手写签名软件手机版下载 手写签名软件】 我曾经在一个文书交互相关的项目中遇到过这样的一个需求，当用户接收到管理员发送的文书时，用户需要在这个文书上签字签收，签名需要跟原有的文书进行合并，做到模仿线下真实签收的电子签名 。这签收没有调用APP特有的功能，而是直接使用H5的canvas画布完成 。
本文只介绍canvas实现你在手机上进行书写（签名），文书与签名的合并是由Java后端完成 。接口比较复杂这里不进行介绍接口，我会在后面的文章中进入介绍，请关注文章的更新 。
以下代码有做一些删减，删减的原因一来是涉及到业务不便公开，二来是跟签名无关的代码留在里面，容易误导你们 。
我在这里简单介绍一下，先定义一个canvas标签，设置他的ID，初始宽度和高度，然后在增加canvas对应的JS初始化函数，这些函数基本可以直接复制到你们的工程里，然后进行测试调整 。主要的功能就是清除和保存 。当你的页面初始化后，就会出现一个白然的画布，如果你在Web页面做测试 的话，你可以使用鼠标进入绘画（因为我这个功能是为某个公众号里的业务做的开发，因此我都是用微信开发者工具进行测试的），也可以放到手机上进入手写测试（手机要支持触摸功能，不要拿老人机进入测试） 。
大概透入一下保存功能，当你点击保存时，会向接口发送一张图片二进制流，你只要做文件读写，保存到本地为图片格式即可，图片出来的就是你的签名 。至于我前面提到的文书签名功能，是把文书Doc转成图片，然后把文书图片跟签名图片进行合并成一张图片 。这样就变成了文书电子签名，因为文书是用户上传的，文书有大有小，你要图片合成，就必须要定位坐标，如何利用简单的算法进入签名定位，这就涉及我下面删除的一些前端逻辑和后端的接口了 。有兴趣的可以关注我后面的介绍 。
虽然我这里用的是vue写法，但并不复杂，直接把div对应的静态代码复制出去，把canvas对应的JS自定义声明函数复制到JS中，把mounted函数里的方法放在JS自动加载中即可 。
老样子，我先截图（我博客截图的会看起来更清楚点），源码在图后面，
源码
<template> <div class="resisterSign"> <div class="top_nav police_nav"> <i class="fa fa-arrow-left" aria-hidden="true" @click="back()"></i> <span class="cont" >电子签名</span> </div> <div class="container"> <canvas ref="canvas" id="canvas" width="300"//画布初始大小 height="480">Canvas画板</canvas> <div class="btns-bottom"> <div class="btn but but-orange" @click="clear">清除</div> <div class="btn but" @click="save">保存</div> </div> </div> </div></template><script> let draw; let preHandler = function(e){ e.preventDefault() } class Draw{//canvas对应的JS自定义声明函数 constructor(el){ this.el = el this.canvas = document.getElementById(this.el);//获取canvas this.cxt = this.canvas.getContext("2d");//canvas追加2d画图 this.stageInfo = canvas.getBoundingClientRect();//canvas元素的边界框 this.path = { beginX: 0, beginY: 0, endX: 0, endY: 0 } this.isCanvas = false } init(btn){//初始化 this.canvas.addEventListener("touchstart",event =>{ document.addEventListener("touchstart",preHandler,false) this.drawBegin(event) }) this.canvas.addEventListener("touchend",event =>{ document.addEventListener("touchend",preHandler,false) this.drawEnd() }) this.clear(btn) } drawBegin(e){ window.getSelection() ? window.getSelection().removeAllRanges() : document.selection.empty() this.cxt.strokeStyle = "#000" //设置线条的颜色 this.cxt.beginPath();//回执开始路径 this.cxt.moveTo( e.changedTouches<0>.clientX - this.stageInfo.left, e.changedTouches<0>.clientY - this.stageInfo.top )//通过moveTo和lineTo，我们来绘制一条线 this.path.beginX = e.changedTouches<0>.clientX - this.stageInfo.left this.path.beginY = e.changedTouches<0>.clientY - this.stageInfo.top canvas.addEventListener("touchmove",() => { this.drawing(event) }) } drawing(e){ //绘制已定义的路径 this.cxt.lineTo( e.changedTouches
推荐阅读
- 表示特别后悔的个性签名 后悔的个性签名
- 代还软件合法吗
- xmind思维导图软件如何应用
- 全民k歌mv用什么软件剪辑
- 朋友圈个性签名该咋地才可以改
- 有哪些图片处理软件
- 全民K歌用什么软件可以变声
- 全民tv游戏直播平台在哪个软件
- 如何使用苹果自带的图书软件
- 手机怎么安装红外线发射器软件