`
longgangbai
  • 浏览: 7325420 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

HTML5 canvas实现电子签名

 
阅读更多

1.为什么要用到BASE64编码的图片信息 
    Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一。Base64 主要不是加密,它主要的用途是把一些二进制数转成普通字符用于网络传输。由于一些二进制字符在传输协议中属于控制字符,不能直接传送需要转换一下。最常见的用途是作为电子邮件或WebService附件的传输编码. 
2.base64编码定义 
  目前的internet e-mail标准--简单邮件传递协议(smtp)在rfc821中规定了两条重要但不难实现的限制: 
        1)邮件的内容必须全部为7-比特的美国ascii码。 
        2)每一行的长度不能超过1000的字符。 
    因此为了通过smtp用e-mail进行传送,内存的序列化对象必须转化为和以上相容的格式。 
    rfc1521提供了一个可行的方案。它定义了邮件的内容部分,使之能包涵多种形式的数据。这种标准就是目前众所周知的mime。 
  按照rfc1521编码过程为:输入是24个比特,输出是4个字节。24个比特输入组从左至右 由3个8比特的输入组形成。这24个比特被看成4个连续的6比特组,而每个6比特输入组被翻译为base64码表中的一个数字。依次反复不断进行,直到全部输入数据转换完成。 
    如果最后剩下两个输入数据,在编码结果后加1个“=”;如果最后剩下一个输入数据,编码结果后加2个“=”;如果没有剩下任何数据,就什么都不要加,这样才可以保证资料还原的正确性。 
    完整的base64定义可见 RFC1421和 RFC2045。编码后的数据比原始数据略长,为原来的4/3。在电子邮件中,根据RFC822规定,每76个字符,还需要加上一个回车换行。可以估算编码后数据长度大约为原长的135.1%。 

4.显示被存储为Base64编码字符串的图片的例子 
1)使用data: URI直接在网页中嵌入. 
data: URI定义于IETF标准的RFC 2397 
data: URI的基本使用格式如下: 
data:[<MIME-type>][;base64|charset=some_charset],<data> 
mime-type是嵌入数据的mime类型,比如png图片就是image/png。 
如果后面跟base64,说明后面的data是采用base64方式进行编码的 

 

  这种方式,Firfox、Opera、Safari和Konqueror这些浏览器都已经支持,但是IE直到7.0版本都还没有支持.所以,比较好的做法是在服务器端将base64编码的字符串转换成byte流.这里,我提供了java的实现方法. 

 

 

图片转换为base64格式的图片和样式的路径:

http://ippa.se/base64-image-encoder/

 

 

 

<!DOCTYPE html >
<html>
<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>
<form action="./Base64ToImages" method="post"><input
	type="hidden" name="imageData" id="imageData" /></form>

<img id="tempImage" src="" style="display: none;" alt="临时图片文件" />

<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() {
        //获取当前页面的信息,在当前页面的img下展示
        var image = document.getElementById("tempImage");
        image.src = canvas.toDataURL("image/png");
        document.getElementById("imageData").value = canvas
                .toDataURL("image/png");
        
        image.style = "display:block;";
        //获取canvas的数据格式如下
        alert(canvas.toDataURL("image/png"));
        //提交表单数据信息
        document.forms[0].submit();
    });
</script>

</body>
</html>

 

 

Servlert代码如下:

 

package com.easyway.html5.canvas;

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.util.Date;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import sun.misc.BASE64Decoder;

/**
 * 
 * Servlet implementation class Base64ToImages
 */
public class Base64ToImages extends HttpServlet {
	private static final long serialVersionUID = 1L;

	/**
	 * @see HttpServlet#HttpServlet()
	 */
	public Base64ToImages() {
		super();
	}

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
	 *      response)
	 */
	protected void doGet(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		doPost(request,response);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
	 *      response)
	 */
	protected void doPost(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		 base64toImage(request);
	}

	/**
	 * 处理base64转化image的方法
	 * @param request
	 */
	public void base64toImage(HttpServletRequest request) {
		try {
			String base64data = request.getParameter("imageData");
			String imageData=base64data.split(",")[1];
			BASE64Decoder decoder = new BASE64Decoder();
			byte[] imgBytes = decoder.decodeBuffer(imageData);
			for (int i = 0; i < imgBytes.length; ++i) {
				if (imgBytes[i] < 0) {// 调整异常数据
					imgBytes[i] += 256;
				}
			}
			//保存特定的目录下面
			String imagepath =getServletContext().getRealPath("/images");
			System.out.println("imagepath="+imagepath);
			File dir=new File(imagepath);
			if(!dir.exists()){
				dir.mkdirs();
			}
			String filename=new Date().getTime()+".png";
			File decFile = new File(imagepath+File.separator+filename);
			String dd=decFile.getAbsolutePath();
			if(decFile.exists()){
				decFile.delete();
			}
			decFile.createNewFile();
			FileOutputStream ops = new FileOutputStream(decFile);
			ops.write(imgBytes, 0, imgBytes.length);
			ops.flush();
			ops.close();
		} catch (IOException e) {
			e.printStackTrace();
		}
	}
}
分享到:
评论
2 楼 godson_2003 2016-04-20  
手机上不能用,只能点点
1 楼 化蝶自在飞 2015-08-30  
貌似手机上不能用?

相关推荐

    Html5 canvas 应用于webkit浏览器实现电子签名

    在WebKit浏览器(如Safari和Chrome)中,HTML5 Canvas的功能得到了很好的支持,使得在这些浏览器上实现电子签名功能变得相对简单。 首先,我们需要理解HTML5 Canvas的基本用法。Canvas是一个基于矢量图形的画布,...

    canvasSignature是基于canvas实现手写签名电子签名功能

    总的来说,canvasSignature组件利用了HTML5 canvas的强大绘图能力,结合jQuery的便利性,为Web应用提供了一种简单、直观的电子签名解决方案。通过理解和应用这个组件,你可以提升网站的用户体验,特别是在需要用户...

    H5手机签字 canvas_sign 手机电子签字 电子签名

    在现代信息化社会,电子签名已经成为了商业活动中不可或缺的一部分,特别是在远程协作和无纸化办公的背景下。本技术分享将深入探讨如何使用HTML5中的Canvas API实现手机电子签字功能,即canvas_sign,它允许用户在...

    canvas电子签名,支持保存签名图片

    以上就是关于“canvas电子签名,支持保存签名图片”的核心知识点。通过canvas,我们可以实现用户友好的电子签名功能,同时保证数据的安全性和可追溯性。在实际项目中,可以根据需求进一步定制和扩展这些功能,提升...

    HTML5 canvas电子签名画板代码.zip

    在这个“HTML5 canvas电子签名画板代码”中,开发者利用canvas构建了一个功能齐全的电子签名应用,包括开启画板、橡皮擦功能、笔设置调整以及保存和撤销操作。 首先,canvas通过JavaScript API来实现动态绘图。`...

    基于mui的和html5电子签名

    通过Canvas元素,HTML5允许开发者在网页上动态绘制图形,这就为实现电子签名提供了画布。用户可以通过触控设备或鼠标在Canvas上绘制签名,然后将绘制的结果保存为图像或数据流,以便于后续的验证和存储。 【Mui框架...

    canvas画板工具 uni-modules、画板、canvas、签名、电子签名、简约风、万能、免费、支持横竖屏

    它提供了丰富的功能,包括绘制曲线、直线、圆形和方形,以及进行清空、撤消、橡皮擦擦除、调整画笔颜色和粗细等操作,满足用户对电子签名和个性化绘图的需求。canvas画板工具以其简约的设计风格和免费使用的特点,...

    html5 canvas米字格式手写文字练习代码.zip

    HTML5 Canvas是网页开发中的一个强大工具,它允许开发者在网页上进行图形绘制,包括文字、图像、动画等。这个“html5 canvas米字格式手写文字练习代码”压缩包提供了一个实例,可以帮助学习者更好地理解和掌握Canvas...

    h5实现Canvas签名

    Canvas签名技术是HTML5中的一项重要特性,它允许在...通过“h5电子签名”项目,开发者可以学习到如何结合HTML5的Canvas技术和JavaScript来创建一个实用且高效的线上签名功能,这在现代Web开发中是非常有价值的技能。

    html5 canvas在线签名板代码

    在线签名板就是利用HTML5 Canvas的一个典型应用场景,它让用户能够在网页上模拟手写签名,广泛应用于电子商务、电子文档签署等领域。 在这个"html5 canvas在线签名板代码"项目中,我们可以看到以下几个关键组成部分...

    微信小程序canvas画板手写签名

    以上就是微信小程序canvas画板实现手写签名的基本流程。在实际开发中,可能还需要处理更多的细节,如优化绘制性能、处理不同设备的触控差异、添加颜色选择等功能。掌握这些技术,可以让你的微信小程序签名功能更加...

    使用SignaturePad 实现的H5电子签名。

    总结起来,使用SignaturePad在H5中实现电子签名涉及的技术包括HTML5画布、JavaScript事件处理、AJAX通信以及可能的CSS样式定制。这个过程不仅展示了前端开发的灵活性,还体现了现代Web技术在简化复杂任务上的强大...

    html5电子签名

    HTML5电子签名是一种在网页上实现用户签署文档的技术,它利用HTML5的Canvas元素和JavaScript技术,为用户提供了一种在浏览器上绘制并保存签名的方法。Canvas是HTML5中用于图形绘制的重要部分,允许开发者通过...

    基于html2canvas将当前页面保存为图片Demo

    这个技术在Web开发中有着广泛的应用,尤其是在H5(HTML5)开发中,比如创建屏幕截图、生成电子签名、页面分享预览等场景。基于这个库,我们可以实现用户在网页上操作后,将整个页面保存为一张图片,为用户提供一种...

    jQuery+HTML5电子签名特效

    首先,我们要理解HTML5中的`canvas`元素,这是实现电子签名的核心。`canvas`提供了一个二维绘图环境,允许开发者通过JavaScript动态绘制图形。在这个案例中,我们将使用`canvas`来捕捉用户的鼠标或触屏动作,实时...

    canvas生成画图签名PC移动全兼容版

    "canvas生成画图签名PC移动全兼容版"是一个基于JavaScript和canvas技术实现的电子签名解决方案,它能够适应个人电脑(PC)和移动设备。下面将详细探讨这个项目所涉及的技术和知识点。 1. **Canvas API**: - ...

    H5 电子签名[jSignature实现]

    H5(HTML5)作为现代网页开发的标准,提供了丰富的功能和API,使得在浏览器端实现电子签名成为可能。jSignature是一款轻量级的JavaScript库,专为H5环境设计,能够帮助开发者轻松地添加电子签名功能到网页应用中。 ...

    html5 canvas写字签名板代码

    这个签名板代码对于在线表单、电子商务、电子签名等领域非常有用,它可以提升用户体验,使远程签名过程更加直观和便捷。同时,它也展示了HTML5 Canvas的强大能力,能够实现复杂的动态交互效果。

    vue 使用 canvas 实现手写电子签名

    在本文中,我们将深入探讨如何使用 Vue.js 集成 Canvas 实现手写电子签名功能。Vue-esign 是一个专门为此目的设计的 Vue 组件,它提供了丰富的特性以满足不同场景的需求。 首先,Vue-esign 支持在 PC 和 Mobile ...

Global site tag (gtag.js) - Google Analytics