有时候我们需要动态的将图片的二进制在页面上进行显示,如我们需要弄一个验证码的功能,那么如果我们的验证码的图片在后台得到的是该图片的二进制,那么当我们需要在页面上点击一个按钮利用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编码,然后在`src`属性中使用"data:" URL模式,这样浏览器就能理解并直接解析这个编码后的字符串。 以题目中给出的实例代码为例,首先在JavaScript中,...
在VB中,我们可以利用内置的函数和方法来实现二进制图片文件向Base64字符串的转换,这个过程对于在网络上传输图像或者存储在数据库中非常有用。 首先,我们需要理解Base64编码的工作原理。Base64使用64个可打印字符...
通常,你可以将二进制数据转换为Base64字符串,因为JSON不支持二进制数据,而Base64编码可以将二进制数据转化为ASCII字符串,方便Ajax传输。 ```javascript function uploadAndSubmit2(binaryData) { // 转换为...
base64编码是一种用64个ASCII字符表示任意二进制数据的方法,它常用于在网页中嵌入小型图片。但当需要上传图片到服务器时,通常服务器期望接收的是标准的文件格式,比如form表单中的文件输入类型(`...
另外,如果直接在网页上显示,需要进行Base64编码或者使用Ajax等技术进行异步加载,否则浏览器无法直接解析二进制数据。 为了优化存储和访问效率,可以考虑使用数据压缩技术,如ZIP或GZIP对二进制数据进行压缩后再...
在JavaScript(JS)中,Base64是一种常用的...在项目中,还可以结合服务端配合处理,比如提供一个API接口,由服务端将Base64编码的图片转换为二进制流并返回,前端再进行下载操作,这样可以避免一些安全和兼容性问题。
这种方式尤其适用于那些对跨域有严格限制的场景,因为Base64编码的图片数据可以作为纯文本进行传输。然而,需要注意的是,Base64编码会使得图片文件大小增加约33%,因此对于大文件可能会增加网络传输的时间和带宽...
Base64编码是一种将二进制数据转换为可打印ASCII字符的编码方式,常用于在网络上传输非ASCII字符,如图片或PDF等。在前端开发中,Base64编码经常被用于将图片转换为字符串,以便嵌入到HTML或者CSS中。在后端,Base64...
1. `encode`: 对任意字符串或二进制数据进行Base64编码。 2. `decode`: 将Base64编码的字符串还原为原始数据。 3. `atob`: 这是JavaScript内置的Base64解码函数,但不适用于所有浏览器,插件可能提供了兼容性处理。 ...
Base64是一种用于将二进制数据转换为可打印ASCII字符的编码方式,常用于在网络上传输非ASCII字符,如图片、音频等二进制数据。在JavaScript中,由于字符串只能处理Unicode字符,因此Base64编码在处理二进制数据时起...
在Web开发中,数据的传输和存储时常需要进行编码处理,Base64编码就是一种常见的二进制转ASCII字符串的方法,广泛应用于图片嵌入、JSON Web Tokens(JWT)以及API请求的数据加密等场景。jQuery作为一款强大的...
Base64使用64个字符(包括大小写字母、数字、加号和斜线)来表示数据,每个字符代表6位二进制数,因此每三个字节可以编码成四个Base64字符。 2. **Base32**:与Base64类似,Base32也是一种用于将二进制数据转换为...
在现代Web应用中,用户经常需要上传图片,为了提高用户体验,开发者通常会在客户端进行图片预览,然后将图片数据转化为Base64编码,通过Ajax发送到服务器端进行存储。这个过程涉及的技术包括JavaScript的文件API、...
通过创建一个`<canvas>`元素,我们可以将图片加载到Canvas中,然后使用`toDataURL()`方法获取其base64编码,再用`drawImage()`方法按比例缩小图片,最后再次调用`toDataURL()`获取压缩后的base64编码。 base64编码...
Base64是一种编码方式,常用于在网络上传输二进制数据,因为HTTP协议和许多文本格式不支持直接传输二进制。在JavaScript中,Base64的加密与解密是前端开发中的常见需求,尤其在处理图像、JSON数据或者进行跨域通信时...
Base64编码是一种将任意二进制数据转换为可打印ASCII字符的编码方式。它将每3个字节的数据转换为4个6位的十六进制数,然后用64个可打印字符(包括大小写字母、数字以及"+"和"/")来表示这4个十六进制数,最后的不足3...
使用`$.base64.encode()`函数可以将任意字符串或二进制数据转换为Base64编码。例如,如果你有一个字符串`var str = "Hello, World!";`,你可以通过`var encodedStr = $.base64.encode(str);`将其编码为Base64格式。...
Base64是一种将二进制数据转换为可打印字符的方法,广泛应用于电子邮件、图像编码和HTTP请求中。它的基本原理是将每3个字节的数据转换成4个Base64字符,每个字符在64个可能的值(A-Z, a-z, 0-9, + 和 /)中选择。...
例如,当需要在URL中传递Base64编码的数据时,先使用Base64编码,然后对结果进行URI编码,确保其在URL中是安全的。在服务器端,PHP会先URI解码,然后再Base64解码。在浏览器端,JavaScript可能先进行Base64编码,...
例如,在处理用户上传的图片时,我们可以使用jQuery.base64将图片数据转化为Base64编码,然后通过AJAX发送到服务器,代码示例如下: ```javascript var fileInput = $('#imageFile'); fileInput.change(function() ...