- 浏览: 7325420 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (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 2891没事开发一个phonegap通讯录使用: js如 ... -
phonegap开发中必备的帮助文档android apk
2012-07-08 16:48 2657在phonegap配置jquerymobile开发的人 ... -
jquerymobile 开发中几个样式问题
2012-07-07 15:16 24691.在jquerymobile开发中如果遇到中文乱码处理如下 ... -
【转】JavaScript编程模式:模块的力量
2012-07-06 12:50 1876块模式是一个常用的JavaScript编程模式。它 ... -
【转】JavaScript闭包和模块模式
2012-07-06 12:45 2052原文:http://www.joezimj ... -
【转】PhoneGap域名白名单说明书(Domain Whitelist Guide)
2012-07-05 17:31 9889概述Cordova项目中的域名白名单是一个用来控制外部域名访问 ... -
phonegap拍照的获取图片和设置问题
2012-07-05 17:10 12771目前项目中Android中第一次加载使用用 ... -
Native+WebApp中Phonegap调用Android Activity
2012-07-05 16:10 10986在项目采用Native+Web方式开发,A ... -
IOS Xcode4.3使用中几个问题
2012-07-04 15:36 18621. xcode 4.3.2 编译生成的app放在哪里? ... -
PhoneGap Xcode iOS入门教程
2012-07-04 15:30 7817文介绍了利用Xcode建立PhoneGap应用程 ... -
phonegap底层原理学习和研究(四)
2012-06-12 17:34 3086在phonegap ... -
phonegap底层原理学习和研究(三)
2012-06-12 17:08 6277针对Phonegap开发中常用的D ... -
phonegap底层原理学习和研究(二)
2012-06-11 11:07 3185转载自IBM中国开发网站: http://www.ibm ... -
【转】手机应用开发者需注意的20个事项
2012-05-30 10:54 1825你想要成为手机开发者吗?你的目标可能是从应用商店中赚取大 ... -
【转】8 个移动产品设计必备网站
2012-05-30 09:49 2151本文整理了8个移动设计资源丰富的网站,希望对你的开发设计工作有 ... -
HTML5 的GEOLocation的API
2012-05-29 10:15 7157Geolocation API用于将用户当前地理位 ... -
jquerymobile 一个简单的九宫格实现(Gallery)
2012-05-28 11:10 9287jquerymobile实现一个简单的九宫格代码如下: ... -
phonegap底层原理学习和研究(一)
2012-05-21 14:16 12067在phonegap中,通过android和ip ... -
jquerymobile google地图插件jquery-ui-map
2012-05-20 16:12 5931最近要开发地图相关的功能,学习一下jquerymob ... -
【转】JQuerymobile 官方 资源和插件
2012-05-19 16:51 8096In this section, we have gat ...
相关推荐
在WebKit浏览器(如Safari和Chrome)中,HTML5 Canvas的功能得到了很好的支持,使得在这些浏览器上实现电子签名功能变得相对简单。 首先,我们需要理解HTML5 Canvas的基本用法。Canvas是一个基于矢量图形的画布,...
总的来说,canvasSignature组件利用了HTML5 canvas的强大绘图能力,结合jQuery的便利性,为Web应用提供了一种简单、直观的电子签名解决方案。通过理解和应用这个组件,你可以提升网站的用户体验,特别是在需要用户...
在现代信息化社会,电子签名已经成为了商业活动中不可或缺的一部分,特别是在远程协作和无纸化办公的背景下。本技术分享将深入探讨如何使用HTML5中的Canvas API实现手机电子签字功能,即canvas_sign,它允许用户在...
以上就是关于“canvas电子签名,支持保存签名图片”的核心知识点。通过canvas,我们可以实现用户友好的电子签名功能,同时保证数据的安全性和可追溯性。在实际项目中,可以根据需求进一步定制和扩展这些功能,提升...
在这个“HTML5 canvas电子签名画板代码”中,开发者利用canvas构建了一个功能齐全的电子签名应用,包括开启画板、橡皮擦功能、笔设置调整以及保存和撤销操作。 首先,canvas通过JavaScript API来实现动态绘图。`...
通过Canvas元素,HTML5允许开发者在网页上动态绘制图形,这就为实现电子签名提供了画布。用户可以通过触控设备或鼠标在Canvas上绘制签名,然后将绘制的结果保存为图像或数据流,以便于后续的验证和存储。 【Mui框架...
它提供了丰富的功能,包括绘制曲线、直线、圆形和方形,以及进行清空、撤消、橡皮擦擦除、调整画笔颜色和粗细等操作,满足用户对电子签名和个性化绘图的需求。canvas画板工具以其简约的设计风格和免费使用的特点,...
HTML5 Canvas是网页开发中的一个强大工具,它允许开发者在网页上进行图形绘制,包括文字、图像、动画等。这个“html5 canvas米字格式手写文字练习代码”压缩包提供了一个实例,可以帮助学习者更好地理解和掌握Canvas...
Canvas签名技术是HTML5中的一项重要特性,它允许在...通过“h5电子签名”项目,开发者可以学习到如何结合HTML5的Canvas技术和JavaScript来创建一个实用且高效的线上签名功能,这在现代Web开发中是非常有价值的技能。
在线签名板就是利用HTML5 Canvas的一个典型应用场景,它让用户能够在网页上模拟手写签名,广泛应用于电子商务、电子文档签署等领域。 在这个"html5 canvas在线签名板代码"项目中,我们可以看到以下几个关键组成部分...
以上就是微信小程序canvas画板实现手写签名的基本流程。在实际开发中,可能还需要处理更多的细节,如优化绘制性能、处理不同设备的触控差异、添加颜色选择等功能。掌握这些技术,可以让你的微信小程序签名功能更加...
总结起来,使用SignaturePad在H5中实现电子签名涉及的技术包括HTML5画布、JavaScript事件处理、AJAX通信以及可能的CSS样式定制。这个过程不仅展示了前端开发的灵活性,还体现了现代Web技术在简化复杂任务上的强大...
HTML5电子签名是一种在网页上实现用户签署文档的技术,它利用HTML5的Canvas元素和JavaScript技术,为用户提供了一种在浏览器上绘制并保存签名的方法。Canvas是HTML5中用于图形绘制的重要部分,允许开发者通过...
这个技术在Web开发中有着广泛的应用,尤其是在H5(HTML5)开发中,比如创建屏幕截图、生成电子签名、页面分享预览等场景。基于这个库,我们可以实现用户在网页上操作后,将整个页面保存为一张图片,为用户提供一种...
首先,我们要理解HTML5中的`canvas`元素,这是实现电子签名的核心。`canvas`提供了一个二维绘图环境,允许开发者通过JavaScript动态绘制图形。在这个案例中,我们将使用`canvas`来捕捉用户的鼠标或触屏动作,实时...
"canvas生成画图签名PC移动全兼容版"是一个基于JavaScript和canvas技术实现的电子签名解决方案,它能够适应个人电脑(PC)和移动设备。下面将详细探讨这个项目所涉及的技术和知识点。 1. **Canvas API**: - ...
H5(HTML5)作为现代网页开发的标准,提供了丰富的功能和API,使得在浏览器端实现电子签名成为可能。jSignature是一款轻量级的JavaScript库,专为H5环境设计,能够帮助开发者轻松地添加电子签名功能到网页应用中。 ...
这个签名板代码对于在线表单、电子商务、电子签名等领域非常有用,它可以提升用户体验,使远程签名过程更加直观和便捷。同时,它也展示了HTML5 Canvas的强大能力,能够实现复杂的动态交互效果。
在本文中,我们将深入探讨如何使用 Vue.js 集成 Canvas 实现手写电子签名功能。Vue-esign 是一个专门为此目的设计的 Vue 组件,它提供了丰富的特性以满足不同场景的需求。 首先,Vue-esign 支持在 PC 和 Mobile ...