有时候我们需要动态的将图片的二进制在页面上进行显示,如我们需要弄一个验证码的功能,那么如果我们的验证码的图片在后台得到的是该图片的二进制,那么当我们需要在页面上点击一个按钮利用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>
分享到:
相关推荐
base64简单地说,它把一些 8-bit 数据翻译成标准 ASCII 字符,我们把图像文件的内容直接写在了HTML 文件中,这样做的好处是,节省了一个HTTP 请求
需要一个二进制与BASE64相互转换的函数,从网上找...示例中提供二进制与16进制字符串转换函数ConvertHexStrToBin与ConvertBinToHexStr,二进制与BASE64编码转换函数Base64Encode与Base64Decode,在VC6下编译通过可用。
NULL 博文链接:https://iszhao.iteye.com/blog/1140899
主要介绍了使用base64对图片的二进制进行编码并用ajax进行显示的相关资料,需要的朋友可以参考下
文件为可执行工具,基于.Net,内含使用说明和样例。 功能为,将保存base64数据的文本文件,转换成对应的二进制文件 可广泛应用于html内嵌图片提取、eml附件提取、http数据流转文件等等。
Hex十六进制/Base64编码转换器,可对字符串文本进行十六进制及Base64编码与反编码
教你用windows系统自带功能编码/解码 十六进制/Base64 -- 解码十六进制编码的文件 -- 解码 Base64 编码的文件 -- 将文件编码为 Base64 doc cmd 下 解码 Base64
base64算法,包含16进制数值型编码,使用时请勾选“编码方式按照16进制数值型编码”,输入16进制字符串,点击编码即可
二进制转换成base64,base64转换成二进制。
在前人的基础上增加了json解析封装得到base64或反转成文件。包括案例,源代码。 调用简单,不错的学习案例。 std::unique_ptr*>p(new const char*(readfile64("{\"filename\":\"D:\\\\job\\\\greatwall\\\\test\\\\1...
二进制ArrayBuffer图片转化为base64.md
包含字符转BASE64编码、十六进制转BASE64编码。以及互转
主要介绍了Python使用base64模块进行二进制数据编码详解,具有一定借鉴价值,需要的朋友可以参考下
ihpne开发用于文件的二进制流的还原用的类
VB将二进制图片文件转换为Base64字符串文本,可直接将字符串加密,也可直接读取数据库或图片文件加密为Base64字符串!
VB 将二进制图片文件转换为Base64字符串文本
cer二进制,base64及证书链解析api和头文件 可以解析通用的.cer的二进制或base编码的CA文件 获取版本号,序列号,有效期,公钥信息,扩展信息等。
解码base64字符串和字节数组或ASCII字符串 解码base64字符串和字节数组或ASCII字符串。 适合处理不能用ASCII字符串表示的二进制数据。 大多数类似的扩展和在线工具只尝试使用ASCII,并在遇到不可打印的字符时显示...
实现将二进制字节数据编码转换为base64的字符串数据,以及将base64字符串转换回二进制字节数据,位操作。
主要介绍了C#对二进制数据进行base64编码的方法,涉及C#中Convert.ToBase64String用法技巧,需要的朋友可以参考下