`
234390216
  • 浏览: 10229968 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
博客专栏
A5ee55b9-a463-3d09-9c78-0c0cf33198cd
Oracle基础
浏览量:462463
Ad26f909-6440-35a9-b4e9-9aea825bd38e
springMVC介绍
浏览量:1775253
Ce363057-ae4d-3ee1-bb46-e7b51a722a4b
Mybatis简介
浏览量:1398185
Bdeb91ad-cf8a-3fe9-942a-3710073b4000
Spring整合JMS
浏览量:394950
5cbbde67-7cd5-313c-95c2-4185389601e7
Ehcache简介
浏览量:679881
Cc1c0708-ccc2-3d20-ba47-d40e04440682
Cas简介
浏览量:530779
51592fc3-854c-34f4-9eff-cb82d993ab3a
Spring Securi...
浏览量:1183619
23e1c30e-ef8c-3702-aa3c-e83277ffca91
Spring基础知识
浏览量:467473
4af1c81c-eb9d-365f-b759-07685a32156e
Spring Aop介绍
浏览量:151280
2f926891-9e7a-3ce2-a074-3acb2aaf2584
JAXB简介
浏览量:68026
社区版块
存档分类
最新评论

使用base64对图片的二进制进行编码,使其可以利用ajax进行显示

阅读更多

有时候我们需要动态的将图片的二进制在页面上进行显示,如我们需要弄一个验证码的功能,那么如果我们的验证码的图片在后台得到的是该图片的二进制,那么当我们需要在页面上点击一个按钮利用ajax进行切换的时候,如果在后台直接返回的是该图片的二进制,那么该图片是无法进行显示的。

直接返回字节流给img标签的src是可以的,如<img src="servlet/CheckCode">,但在之后进行切换的时候
使用ajax请求,如果仅仅返回图片的二进制然后把它传给img的src是不能的,目前的方法是把图片的二进制进行base64编码,
然后在页面上以下列方式进行显示,<img src="data:image/jpeg;base64,result">,其中的result是经过
base64编码后的内容,这样就可以使用后台直接利用图片的二进制进行图片的显示了

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>code.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
    	$(function() {
    		
    		init();
    	
    		$("[type='button']").click(function() {
    			$.post("servlet/CheckCode",{},function(data) {
    				//注意这里src的写法,data是经过base64编码后的内容
    				$("img").attr("src","data:image/jpeg;base64,"+data);
    			});
    		});
    		
    	});
    	function init() {
    		$.post("servlet/CheckCode",{},function(data) {
    			//其实在第一次运行的时候是可以直接将图片的二进制作为Image的src进行显示的,但是因为后台统一返回的是
    			//经过base64编码过后的内容,所以这里初始显示的时候也是利用base64的方法
   				$("img").attr("src","data:image/jpeg;base64,"+data);
   			});
    	}
    </script>

  </head>
  
  <body>
    <img alt="" width=100 >
    <input type="button" value="换一张"/>
  </body>
</html>
 
0
3
分享到:
评论
3 楼 di1984HIT 2014-10-25  
说的很对啊。
2 楼 234390216 2013-06-25  
rongmiao 写道
后台直接输出到页面中,页面上src="${actionUrl}"就可以了,不过你这种方法也可以

当然如果是直接通过Ajax改变img的src的话那是没有问题的,但是如果是如上通过Ajax获取到图片对应的二进制然后再赋给src的话就需要如上处理了。
1 楼 rongmiao 2013-06-25  
后台直接输出到页面中,页面上src="${actionUrl}"就可以了,不过你这种方法也可以

相关推荐

    使用base64对图片的二进制进行编码并用ajax进行显示

    为了解决这个问题,我们可以先对图片的二进制数据进行Base64编码,然后在`src`属性中使用"data:" URL模式,这样浏览器就能理解并直接解析这个编码后的字符串。 以题目中给出的实例代码为例,首先在JavaScript中,...

    VB 将二进制图片文件转换为Base64字符串文本

    在VB中,我们可以利用内置的函数和方法来实现二进制图片文件向Base64字符串的转换,这个过程对于在网络上传输图像或者存储在数据库中非常有用。 首先,我们需要理解Base64编码的工作原理。Base64使用64个可打印字符...

    JavaScript读二进制文件并用ajax传输二进制流的方法

    通常,你可以将二进制数据转换为Base64字符串,因为JSON不支持二进制数据,而Base64编码可以将二进制数据转化为ASCII字符串,方便Ajax传输。 ```javascript function uploadAndSubmit2(binaryData) { // 转换为...

    JavaScript将base64图片转换成formData并通过AJAX提交的实现方法

    base64编码是一种用64个ASCII字符表示任意二进制数据的方法,它常用于在网页中嵌入小型图片。但当需要上传图片到服务器时,通常服务器期望接收的是标准的文件格式,比如form表单中的文件输入类型(`...

    图片存取(二进制)

    另外,如果直接在网页上显示,需要进行Base64编码或者使用Ajax等技术进行异步加载,否则浏览器无法直接解析二进制数据。 为了优化存储和访问效率,可以考虑使用数据压缩技术,如ZIP或GZIP对二进制数据进行压缩后再...

    js base64编码格式图片另存为下载

    在JavaScript(JS)中,Base64是一种常用的...在项目中,还可以结合服务端配合处理,比如提供一个API接口,由服务端将Base64编码的图片转换为二进制流并返回,前端再进行下载操作,这样可以避免一些安全和兼容性问题。

    通过base64上传图片到服务器并读取图片

    这种方式尤其适用于那些对跨域有严格限制的场景,因为Base64编码的图片数据可以作为纯文本进行传输。然而,需要注意的是,Base64编码会使得图片文件大小增加约33%,因此对于大文件可能会增加网络传输的时间和带宽...

    Base64编码和解码的应用(前后端程序)

    Base64编码是一种将二进制数据转换为可打印ASCII字符的编码方式,常用于在网络上传输非ASCII字符,如图片或PDF等。在前端开发中,Base64编码经常被用于将图片转换为字符串,以便嵌入到HTML或者CSS中。在后端,Base64...

    Base64的js插件

    1. `encode`: 对任意字符串或二进制数据进行Base64编码。 2. `decode`: 将Base64编码的字符串还原为原始数据。 3. `atob`: 这是JavaScript内置的Base64解码函数,但不适用于所有浏览器,插件可能提供了兼容性处理。 ...

    jq_base64.js

    Base64是一种用于将二进制数据转换为可打印ASCII字符的编码方式,常用于在网络上传输非ASCII字符,如图片、音频等二进制数据。在JavaScript中,由于字符串只能处理Unicode字符,因此Base64编码在处理二进制数据时起...

    jquery.base64.js_downcc.zip

    在Web开发中,数据的传输和存储时常需要进行编码处理,Base64编码就是一种常见的二进制转ASCII字符串的方法,广泛应用于图片嵌入、JSON Web Tokens(JWT)以及API请求的数据加密等场景。jQuery作为一款强大的...

    js的base64和base32加密函数

    Base64使用64个字符(包括大小写字母、数字、加号和斜线)来表示数据,每个字符代表6位二进制数,因此每三个字节可以编码成四个Base64字符。 2. **Base32**:与Base64类似,Base32也是一种用于将二进制数据转换为...

    js本地预览图片转base64+php存储成图片

    在现代Web应用中,用户经常需要上传图片,为了提高用户体验,开发者通常会在客户端进行图片预览,然后将图片数据转化为Base64编码,通过Ajax发送到服务器端进行存储。这个过程涉及的技术包括JavaScript的文件API、...

    HTML5HTML5 选图 压缩 base64编码 上传 解码

    通过创建一个`&lt;canvas&gt;`元素,我们可以将图片加载到Canvas中,然后使用`toDataURL()`方法获取其base64编码,再用`drawImage()`方法按比例缩小图片,最后再次调用`toDataURL()`获取压缩后的base64编码。 base64编码...

    Base64_javascript_base64_

    Base64是一种编码方式,常用于在网络上传输二进制数据,因为HTTP协议和许多文本格式不支持直接传输二进制。在JavaScript中,Base64的加密与解密是前端开发中的常见需求,尤其在处理图像、JSON数据或者进行跨域通信时...

    jquery base64编码解码插件

    Base64编码是一种将任意二进制数据转换为可打印ASCII字符的编码方式。它将每3个字节的数据转换为4个6位的十六进制数,然后用64个可打印字符(包括大小写字母、数字以及"+"和"/")来表示这4个十六进制数,最后的不足3...

    Jquery.base64.js

    使用`$.base64.encode()`函数可以将任意字符串或二进制数据转换为Base64编码。例如,如果你有一个字符串`var str = "Hello, World!";`,你可以通过`var encodedStr = $.base64.encode(str);`将其编码为Base64格式。...

    jquery.base64.js及使用方法

    Base64是一种将二进制数据转换为可打印字符的方法,广泛应用于电子邮件、图像编码和HTTP请求中。它的基本原理是将每3个字节的数据转换成4个Base64字符,每个字符在64个可能的值(A-Z, a-z, 0-9, + 和 /)中选择。...

    PHP+JS Base64和URI编码解码混合使用

    例如,当需要在URL中传递Base64编码的数据时,先使用Base64编码,然后对结果进行URI编码,确保其在URL中是安全的。在服务器端,PHP会先URI解码,然后再Base64解码。在浏览器端,JavaScript可能先进行Base64编码,...

    jquery.base64

    例如,在处理用户上传的图片时,我们可以使用jQuery.base64将图片数据转化为Base64编码,然后通过AJAX发送到服务器,代码示例如下: ```javascript var fileInput = $('#imageFile'); fileInput.change(function() ...

Global site tag (gtag.js) - Google Analytics