HTML5 canvas实现电子签名1.为什么要用到BASE64编码的图片信息???? Base64是网络上最常见的用于传输8Bit字
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/
?
?
?
?
?
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();}}}