前段时间做了一个html5的小应用,将电子签名整合到系统的审批中。 还好,发现html5实现起来很方便。
webkit浏览器,便可以使用canvas来完成画板签名。如下图
代码如下:
在网上收集了些资料,稍微整理修改了下,保证copy即可运行。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#canvas{ border:1px solid #ccc;}
</style>
</head>
<body>
<div id="canvasDiv"></div>
<button id="btn_clear">Clear</button>
<button id="btn_submit">Submit</button>
<script language="javascript">
var canvasDiv = document.getElementById('canvasDiv');
var canvas = document.createElement('canvas');
var canvasWidth = 600, canvasHeight=400;
var point = {};
point.notFirst = false;
canvas.setAttribute('width', canvasWidth);
canvas.setAttribute('height', canvasHeight);
canvas.setAttribute('id', 'canvas');
canvasDiv.appendChild(canvas);
if(typeof G_vmlCanvasManager != 'undefined') {
canvas = G_vmlCanvasManager.initElement(canvas);
}
var context = canvas.getContext("2d");
canvas.addEventListener("mousedown", function(e){
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
paint = true;
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
redraw();
});
canvas.addEventListener("mousemove", function(e){
if(paint){
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
redraw();
}
});
canvas.addEventListener("mouseup", function(e){
paint = false;
});
canvas.addEventListener("mouseleave", function(e){
paint = false;
});
var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var paint;
function addClick(x, y, dragging)
{
clickX.push(x);
clickY.push(y);
clickDrag.push(dragging);
}
function redraw(){
//canvas.width = canvas.width; // Clears the canvas
context.strokeStyle = "#df4b26";
context.lineJoin = "round";
context.lineWidth = 5;
while (clickX.length > 0 ) {
point.bx = point.x;
point.by = point.y;
point.x = clickX.pop();
point.y = clickY.pop();
point.drag = clickDrag.pop();
context.beginPath();
if (point.drag && point.notFirst) {
context.moveTo(point.bx, point.by);
} else {
point.notFirst = true;
context.moveTo(point.x - 1, point.y);
}
context.lineTo(point.x, point.y);
context.closePath();
context.stroke();
}
/*
for(var i=0; i < clickX.length; i++)
{
context.beginPath();
if(clickDrag[i] && i){
context.moveTo(clickX[i-1], clickY[i-1]);
}else{
context.moveTo(clickX[i]-1, clickY[i]);
}
context.lineTo(clickX[i], clickY[i]);
context.closePath();
context.stroke();
}
*/
}
var clear = document.getElementById("btn_clear");
var submit = document.getElementById("btn_submit");
clear.addEventListener("click", function(){
canvas.width = canvas.width;
});
submit.addEventListener("click", function(){
alert(canvas.toDataURL("image/png"));
});
</script>
</body>
</html>
绘图就不说,关键点就是后面的canvas.toDataURL("image/png"),这个方法会返回当前图片被base64编码的字符串
只需在服务端拿到这个字符串解码便可以还原成图片。
既然是webkit浏览器支持canvas,那么用于手机上也没问题,稍微修改mouse事件为touch事件,亲测android2.3.3上的海豚和QQ浏览器都可以。。
据说在iphone中支持(未测试)。但是还是有牛肉写了方法自己编码图片,只是效率低了很多,但毕竟能返回数据了。参考附件canvas_pad.html
html5确实比较强大的。这只是一个很小很小的应用。还有很多小游戏,video等等都能用她实现。。
对于IE9以下的支持网上应该是有控件的,我没再研究了。
html5是一次web变革?
- 大小: 16.9 KB
分享到:
相关推荐
H5页面通过canvas_sign实现手机签名功能 canvas 电脑及手机端签名实现 电子签名
NULL 博文链接:https://topmanopensource.iteye.com/blog/1544126
canvasSignature是基于html5 canvas及jquery实现手写签名(电子签名)功能的js组件
用于各个浏览器(IE)html2canvas不工作解决方案 html2canvas在火狐、Chrome等浏览器好用,但是IE浏览器无效,导入这个js后就OK啦
Vue Canvas 实现电子签名 ,并返回 Base64 数据
使用html5 canvas标签实现手写 但是效果不是很好 没有笔锋 后续慢慢改进 感谢实现过程中帮助我的人
自定义一个h5页面,实现可以横屏手写电子签名的功能,且支持回显(图片可以转化为签字版的canvas,且支持在此基础上继续进行手写签名)由于uniapp微信小程序支持横竖屏切换配置,但是移动端h5不支持。自定义一个h5...
html5签名canvas html5签名canvashtml5签名canvashtml5签名canvashtml5签名canvashtml5签名canvashtml5签名canvas
HTML5 CANVAS 绘图 JS 只需要简单的一行代码即可渲染整个绘图版 主要用于实现手写签名
《HTML 5 Canvas基础教程》从HTML5和JavaScript(以及jQuery)的基础知识讲起,全面介绍了HTML5Canvas的各种特性,包括渲染上下文、坐标系统、绘制图形、保存和恢复画布状态,以及变形、合成、处理图像和视频等,让...
html5 canvas 实现刮刮卡效果,实现简单网络资源占用少
HTML5 canvas电子签名画板代码,有打开画板、橡皮擦、笔设置、返回、提交等功能。
这个html2canvas脚本将当页面渲染成一个Canvas图片,通过读取DOM并将不同的样式应用到这些元素上实现。 它不需要来自服务器任何渲染,整张图片都是在客户端浏览器创建。当浏览器不支持Canvas时,将采用Flashcanvas...
html2canvas 能够实现在浏览器端、app端直接对整个或部分页面进行截屏。这个html2canvas脚本将当页面渲染成一个canvas图片,通过读取DOM并将不同的样式应用到这些元素上实现。
它首次由苹果公司的 Webkit 框架引入实现,并成功运用在 Safari 浏览器中,读者在 这里可以体验到基于 canvas 的精彩示例。目前,canvas 已成为 HTML5 规范中的事实性标准,并且已经被 Firefox 3.0+, Safari 3.0+, ...
html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的...
参考html5 canvas中文文档实现的贪吃蛇。
在手机上实现签名功能的一个HTML5特效,HTML5 canvas支持手机触摸屏的签名涂鸦插件,打开网页后稍等片刻网页加载完远程插件后,即将涂鸦,下方的空白格子中即为涂鸦区域,采用了HTML5 canvas和jq-signature.min共同...
这是一款基于HTML5 Canvas实现的鼠标点击拖动电子杂志翻书动画代码,HTML5电子杂志翻页特效。