- 浏览: 7251183 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (1546)
- 企业中间件 (236)
- 企业应用面临的问题 (236)
- 小布Oracle学习笔记汇总 (36)
- Spring 开发应用 (54)
- IBatis开发应用 (16)
- Oracle基础学习 (23)
- struts2.0 (41)
- JVM&ClassLoader&GC (16)
- JQuery的开发应用 (17)
- WebService的开发应用 (21)
- Java&Socket (44)
- 开源组件的应用 (254)
- 常用Javascript的开发应用 (28)
- J2EE开发技术指南 (163)
- EJB3开发应用 (11)
- GIS&Mobile&MAP (36)
- SWT-GEF-RCP (52)
- 算法&数据结构 (6)
- Apache开源组件研究 (62)
- Hibernate 学习应用 (57)
- java并发编程 (59)
- MySQL&Mongodb&MS/SQL (15)
- Oracle数据库实验室 (55)
- 搜索引擎的开发应用 (34)
- 软件工程师笔试经典 (14)
- 其他杂项 (10)
- AndroidPn& MQTT&C2DM&推技术 (29)
- ActiveMQ学习和研究 (38)
- Google技术应用开发和API分析 (11)
- flex的学习总结 (59)
- 项目中一点总结 (20)
- java疑惑 java面向对象编程 (28)
- Android 开发学习 (133)
- linux和UNIX的总结 (37)
- Titanium学习总结 (20)
- JQueryMobile学习总结 (34)
- Phonegap学习总结 (32)
- HTML5学习总结 (41)
- JeeCMS研究和理解分析 (9)
最新评论
-
lgh1992314:
[u][i][b][flash=200,200][url][i ...
看看mybatis 源代码 -
尼古拉斯.fwp:
图片根本就不出来好吧。。。。。。
Android文件图片上传的详细讲解(一)HTTP multipart/form-data 上传报文格式实现手机端上传 -
ln94223:
第一个应该用排它网关吧 怎么是并行网关, 并行网关是所有exe ...
工作流Activiti的学习总结(八)Activiti自动执行的应用 -
ZY199266:
获取不到任何消息信息,请问这是什么原因呢?
ActiveMQ 通过JMX监控Connection,Queue,Topic的信息 -
xiaoyao霄:
DestinationSourceMonitor 报错 应该导 ...
ActiveMQ 通过JMX监控Connection,Queue,Topic的信息
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(); } } }
- HTML5CanvasImages.zip (11.7 KB)
- 下载次数: 392
发表评论
-
phonegap contact API的使用
2012-07-10 14:23 2842没事开发一个phonegap通讯录使用: js如 ... -
phonegap开发中必备的帮助文档android apk
2012-07-08 16:48 2599在phonegap配置jquerymobile开发的人 ... -
jquerymobile 开发中几个样式问题
2012-07-07 15:16 24081.在jquerymobile开发中如果遇到中文乱码处理如下 ... -
【转】JavaScript编程模式:模块的力量
2012-07-06 12:50 1831块模式是一个常用的JavaScript编程模式。它 ... -
【转】JavaScript闭包和模块模式
2012-07-06 12:45 2010原文:http://www.joezimj ... -
【转】PhoneGap域名白名单说明书(Domain Whitelist Guide)
2012-07-05 17:31 9840概述Cordova项目中的域名白名单是一个用来控制外部域名访问 ... -
phonegap拍照的获取图片和设置问题
2012-07-05 17:10 12679目前项目中Android中第一次加载使用用 ... -
Native+WebApp中Phonegap调用Android Activity
2012-07-05 16:10 10926在项目采用Native+Web方式开发,A ... -
IOS Xcode4.3使用中几个问题
2012-07-04 15:36 18151. xcode 4.3.2 编译生成的app放在哪里? ... -
PhoneGap Xcode iOS入门教程
2012-07-04 15:30 7758文介绍了利用Xcode建立PhoneGap应用程 ... -
phonegap底层原理学习和研究(四)
2012-06-12 17:34 3041在phonegap ... -
phonegap底层原理学习和研究(三)
2012-06-12 17:08 6217针对Phonegap开发中常用的D ... -
phonegap底层原理学习和研究(二)
2012-06-11 11:07 3121转载自IBM中国开发网站: http://www.ibm ... -
【转】手机应用开发者需注意的20个事项
2012-05-30 10:54 1748你想要成为手机开发者吗?你的目标可能是从应用商店中赚取大 ... -
【转】8 个移动产品设计必备网站
2012-05-30 09:49 2100本文整理了8个移动设计资源丰富的网站,希望对你的开发设计工作有 ... -
HTML5 的GEOLocation的API
2012-05-29 10:15 7106Geolocation API用于将用户当前地理位 ... -
jquerymobile 一个简单的九宫格实现(Gallery)
2012-05-28 11:10 9228jquerymobile实现一个简单的九宫格代码如下: ... -
phonegap底层原理学习和研究(一)
2012-05-21 14:16 12002在phonegap中,通过android和ip ... -
jquerymobile google地图插件jquery-ui-map
2012-05-20 16:12 5834最近要开发地图相关的功能,学习一下jquerymob ... -
【转】JQuerymobile 官方 资源和插件
2012-05-19 16:51 7978In this section, we have gat ...
相关推荐
canvasSignature是基于html5 canvas及jquery实现手写签名(电子签名)功能的js组件
HTML5 canvas电子签名画板代码,有打开画板、橡皮擦、笔设置、返回、提交等功能。
NULL 博文链接:https://doubleyoung.iteye.com/blog/1168640
HTML5电子签名板文字涂鸦代码是一款HTML5基于Canvas绘制文字涂鸦的电子签名板代码。
这是一款基于jQuery HTML5 Canvas实现的用鼠标写字进行电子签名效果,仿信用卡电子签名特效,可以进行确认签名或取消签名代码。 js代码 [removed][removed] [removed][removed] [removed] $(function(){ //...
Canvas仿信用卡电子签名特效是一款基于jQuery HTML5实现的电子签名,可以进行确认签名或取消签名功能特效。
html2canvas
基于html2canvas将当前页面保存为图片Demo。压缩包中包含html2canvas插件脚本及一个简单的调用Demo,代码内容一目了然且附有步骤注释,很容易上手。
Canvas仿信用卡电子签名特效是一款基于jQuery+HTML5实现的电子签名,可以进行确认签名或取消签名功能特效。
基于jq-signature.js开发的电子签名插件,其中包含一个完整调用案例并附有简单注释,压缩包中包含了jq-signature开发版和压缩版的文件,可根据实际场景选择文件;使用前请阅读README文件,了解Demo的使用及特性。
在几年前HTML5还没有流行的时候,我们的项目经理曾经向我提出这样一个需求:让项目评审专家们在评审结束时用笔在平板电脑上进行电子签名。这需要我们评审软件里提供这样一个功能:打开浏览器,登录,进入评审意见页...
html5生成QQ签名字体样式代码是一款基于html5 canvas实现的字体设置生成图片字体样式,QQ签名字体样式。
想要绘制图形,第一步想到的就是使用canvas标签,在之前的文章里我们使用canvas实现了一个前端生成图形验证码的组件,被吐槽不够安全,那么这个电子签名组件想必不会被吐槽了吧~ canvas <canvas> 标签是 HTML 5 中...
HTML5电子签名板文字涂鸦代码是一款HTML5基于Canvas绘制文字涂鸦的电子签名板代码。
HTML5电子签名板文字涂鸦代码是一款HTML5基于Canvas绘制文字涂鸦的电子签名板代码。
签到 Zetakey登录并发送-Webapp... 它使用具有Canvas支持HTML5浏览器(例如Zetakey浏览器 )捕获签名并发送到电子邮件地址 作者 黄杰克 来源 现场演示 发行公告 upload_file.php使用getimagesize代替imagesx和imagesy。
(4)针对系统的功能实现问题,通过结合利用原生态框架与HTML5的跨平台性,实现了“认我测”在线认证检测系统。 综上所述,“认我测”在线认证检测系统,率先填补了认证检测领域移动端的空缺,提供了Web浏览器+...
基于canvas制作简单的油漆绘图ui工具,默认设置3种颜色笔刷,可通过设置RBG值来调色添加色板。这是一款简单实用的画板绘图工具特效。适用于:绘图或电子签名。