html5采集手写签名,前端canvas手写签名(含移动端)
image.png
直接上代码
手写签名
html,
body {
margin: 0;
padding: 0;
}
.saveimg {
text-align: center;
}
.saveimgs span {
display: inline-block;
margin-top: 5px;
}
清空画板 Line width :
1
3
5
7
9
11
Color :
black
blue
red
green
yellow
gray
保存
var mousePressed = false;
var lastX, lastY;
var ctx = document.getElementById('myCanvas').getContext("2d");
var c = document.getElementById("myCanvas");
var control = document.getElementsByClassName("control")[0];
var saveimgs = document.getElementsByClassName("saveimgs")[0];
window.onload = function() {
InitThis();
}
function saveImageInfo() {
var image = c.toDataURL("image/png");
var ctximg = document.createElement("span");
ctximg.innerHTML = "";
if (saveimgs.getElementsByTagName('span').length >= 1) {
var span_old = saveimgs.getElementsByTagName("span")[0];
saveimgs.replaceChild(ctximg, span_old)
} else {
saveimgs.appendChild(ctximg);
}
// console.log(image)
}
var selected1, selected2;
function aaa() {
var sel = document.getElementById('selWidth');
var value = sel.selectedIndex;
return selected1 = sel[value].value;
}
function aaa2() {
var sel2 = document.getElementById('selColor');
var value = sel2.selectedIndex;
return selected2 = sel2[value].value;
}
function InitThis() {
// 触摸屏
c.addEventListener('touchstart', function(event) {
console.log(1)
if (event.targetTouches.length == 1) {
event.preventDefault(); // 阻止浏览器默认事件,重要
var touch = event.targetTouches[0];
mousePressed = true;
Draw(touch.pageX - this.offsetLeft, touch.pageY - this.offsetTop, false);
}
}, false);
c.addEventListener('touchmove', function(event) {
console.log(2)
if (event.targetTouches.length == 1) {
event.preventDefault(); // 阻止浏览器默认事件,重要
var touch = event.targetTouches[0];
if (mousePressed) {
Draw(touch.pageX - this.offsetLeft, touch.pageY - this.offsetTop, true);
}
}
}, false);
c.addEventListener('touchend', function(event) {
console.log(3)
if (event.targetTouches.length == 1) {
event.preventDefault(); // 阻止浏览器默认事件,防止手写的时候拖动屏幕,重要
// var touch = event.targetTouches[0];
mousePressed = false;
}
}, false);
/*c.addEventListener('touchcancel', function (event) {
console.log(4)
mousePressed = false;
},false);*/
// 鼠标
c.onmousedown = function(event) {
mousePressed = true;
Draw(event.pageX - this.offsetLeft, event.pageY - this.offsetTop, false);
};
c.onmousemove = function(event) {
if (mousePressed) {
Draw(event.pageX - this.offsetLeft, event.pageY - this.offsetTop, true);
}
};
c.onmouseup = function(event) {
mousePressed = false;
};
}
function Draw(x, y, isDown) {
if (isDown) {
ctx.beginPath();
ctx.strokeStyle = selected2;
ctx.lineWidth = selected1;
ctx.lineJoin = "round";
ctx.moveTo(lastX, lastY);
ctx.lineTo(x, y);
ctx.closePath();
ctx.stroke();
}
lastX = x;
lastY = y;
}
function clearArea() {
// Use the identity matrix while clearing the canvas
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
// 清除签名图片
if (saveimgs.getElementsByTagName('span').length >= 1) {
var clearImg = saveimgs.getElementsByTagName('span')[0];
saveimgs.removeChild(clearImg);
}
}
html5采集手写签名,前端canvas手写签名(含移动端)相关推荐
- 在线签名、canvas手写在线签名——小程序端实现在线签名,手写电子签名canvas
在线签名.canvas手写在线签名--小程序端实现在线签名,手写电子签名canvas 近期公司准备接一个政府的小项目,里头有一个在线签名的需求,老板让我研究一下.于是就...开始思考: 在线手写签名, ...
- 前端canvas手写签名
最近遇到一个需求,签合同的时候在移动端上客户要手写签名,然后把签名生成的图片传给后端,技术栈react 步骤一:基础实现代码如下 技术点大致解析: 1. document.querySelector( ...
- java前端接口怎么写_前端接口怎么写
1.java后台怎么写接口给前端使用 java后台如何给前端写使用接口,框架一开始就得考虑好的,很多都使用mvc架构往往用户登录时,用户密码符合,会允许其访问,保存登录信息,下次就不需要再次登录了,直 ...
- canvas 插件_基于Angular的Canvas手写签名插件
灵感来源 之前, 在轻流的业务中遇到了一个需求, 是能够让客户使用手写签名的功能. 签名演示 问题来了, 这...我不会啊! 这得是Canvas了吧. 正所谓, 插件用的好, 下班走的早. 于是我就开 ...
- html5 canvas手写画板 下载图片至本地
html5 canvas手写画板 下载图片至本地 <!DOCTYPE html> <html><head><meta charset="utf-8& ...
- html 手写签名 撤销,[转]H5 canvas手写签名
手写签名 html,body{ margin: 0; padding: 0; } .saveimg{ text-align: center; } .saveimgs span{ display: in ...
- html5实现安卓的手写功能,html5 canvas手写字代码(兼容手机端)(示例代码)
html5 canvas手写字代码(兼容手机端) 画板实验 清 空 生成图片 var canvas,board,img; canvas = document.getElementById('myCan ...
- 手写bind_一次搞定前端“四大手写”
本文首发于个人GitHub博客 要问程序员最心虚的面试题,如果要投票选择,手撕代码一定是前三位的.其中在前端领域,以手写 bind.手写深拷贝.手写 EventHub(发布-订阅).手写 Promis ...
- canvas 手写毛笔字效果
<!doctype html> <html lang="en"> <head><meta charset="UTF-8" ...
最新文章
- linux内网机器访问外网代理设置squid
- NFS 网络文件系统
- SWT多线程注意事项
- java bigram_Java BiGramDictionary.getBiFrequency方法代碼示例
- leetcode题解279-完全平方数
- dw写出来的php乱码,解决DW中的乱码问题
- 由条件熵与无条件熵的关系引出的不等式证明题(不会抄答案系列)
- 点击IE窗口上方的“X关闭符号”,弹出提示窗口!
- system32文件夹里的文件详解
- MySql触发器讲解及使用案例
- 我来谈谈为啥企业QQ下线
- Cesium笔记之加载GIF图
- 代码评审系统 ReviewBoard 和 Gerrit
- coolie —— 前端开发构建工具。
- Flutter 不是真正的跨平台框架
- 2021最新更新多接口VIP影视解析源码
- 【 MySQL1064错误代码】
- 计算机毕业设计java基于ssm的企业工资管理系统
- diffdock:将扩散模型用于分子对接
- Oracle裁员,N+6赔偿,你只看到幸福感?