canvas实现在线签名

1.代码

<body><div style="margin:20px auto; text-align:center;">签名版</div><canvas id="canvasbox" width="500" height="250"style="border:1px solid green; margin:20px auto;display:block;"></canvas><div class="btn" style="margin:0 auto; text-align:center;"><button id="savebtn">保存</button><button id="clearbtn">清空</button></div><script>var canvasbox = document.getElementById("canvasbox");var ctx = canvasbox.getContext("2d");var iscanvas = false;var offsetX = '';var offsetY = '';canvasbox.addEventListener("mousedown", function (e) {iscanvas = true;offsetX = e.offsetX;offsetY = e.offsetY;})canvasbox.addEventListener("mousemove", function (e) {if (iscanvas) {ctx.beginPath();ctx.moveTo(offsetX, offsetY)ctx.lineTo(e.offsetX, e.offsetY)ctx.lineWidth = 5;ctx.stroke()offsetX = e.offsetX;offsetY = e.offsetY;}})canvasbox.addEventListener("mouseup", function () {iscanvas = false;})canvasbox.addEventListener("mouseleave", function () {iscanvas = false;})var clearbtn = document.getElementById("clearbtn");clearbtn.addEventListener("click", function () {ctx.clearRect(0, 0, canvasbox.width, canvasbox.height)})var savebtn = document.getElementById("savebtn");savebtn.addEventListener("click", function () {downLoad(saveAsPNG(canvasbox));})function downLoad(url) {var oA = document.createElement("a");oA.download = 'download';// 设置下载的文件名，默认是'download'oA.href = url;document.body.appendChild(oA);oA.click();oA.remove(); // 下载之后把创建的元素删除}// 保存成png格式的图片function saveAsPNG(canvas) {return canvas.toDataURL("image/png");  //将图片转换成base64编码// ajax提交var nameImg = canvas.toDataURL("image/png");$.ajax({url: "",type: "post",data: { "nameImg": nameImg },success: function (res) {if (res.status == 1) {window.location.href = ""}}})}// 保存成jpg格式的图片function saveAsJPG(canvas) {return canvas.toDataURL("image/jpeg");}</script></body>

2.效果

canvas实现在线签名相关推荐

在线签名、canvas手写在线签名——小程序端实现在线签名，手写电子签名canvas
在线签名.canvas手写在线签名--小程序端实现在线签名,手写电子签名canvas 近期公司准备接一个政府的小项目,里头有一个在线签名的需求,老板让我研究一下.于是就...开始思考: 在线手写签名, ...
html5 签名,canvas在线签名插件Tablet
插件描述:Tablet是一个基于canvas的在线签名板! 更新时间:2021-04-28 22:33:31 更新说明: 1.支持回退操作 2.浏览器窗口大小改变自动重绘 3.删除了之前一些不合理的代 ...
手机之家在线签名_选择苹果企业签名的原因有哪些？
ios开发者在没有苹果开发者账号的情况下,只能够选择苹果签名商进行代签名,但是市场上签名的种类在不断的上新,我们应该怎么进行选择呢? 微导流-苹果ios企业签名|TF签名|内测分发托管|免费APP封装 ...
文档在线签名_为什么需要为文档和合同切换到在线签名
文档在线签名嘿,怪胎, 今天,我们为您带来一些不同. 无论您是开发人员,经理还是设计师,这都会提高您的生产力和效率. 对于公司和个人而言,良好地管理文书工作是强大基础的最重要部分之一. 将工作流程从 ...
html5采集手写签名,前端canvas手写签名（含移动端）
image.png 直接上代码手写签名 html, body { margin: 0; padding: 0; } .saveimg { text-align: center; } .saveimg ...
h5 vue利用canvas实现手机签名并且可旋转功能
功能描述: 利用canvas实现手机签名转化成图片( 包含清除,由于手机全屏展示所以还添加了图片翻转功能)生成base64地址上传后台功能展示: 代码展示: html: <template ...
html 手写签名撤销,[转]H5 canvas手写签名
手写签名 html,body{ margin: 0; padding: 0; } .saveimg{ text-align: center; } .saveimgs span{ display: in ...
Android实现客制化系统apk在线签名
目录一.基线代码签名key 二.如何生成自定义的签名pk8 .x509.pem 签名文件三.如何使用签名key对apk进行重新签名四.大厂商为了安全,使用自定义签名方式,而不采用原生的签名方式 ...
门店订货及在线签名免费开源方案
引言 Odoo是欧洲开发的,世界排名第一的开源免费ERP系统.该系统从2002开始研发,经过十几年的发展,去年下半年发布了12.0版.该软件因为免费下载,源代码开放,吸引了世界范围很多人参与使用及开发 ...

canvas实现在线签名

1.代码

2.效果

canvas实现在线签名相关推荐

最新文章

热门文章