使用base64对图片的二进制进行编码并用ajax进行显示
作者:lqh 发布时间:2024-05-02 16:18:24
标签:base64,二进制,编码
使用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>


猜你喜欢
- 一、复制原理主服务器将更新写入二进制日志文件,并维护文件的一个索引以跟踪日志循环。这些日志可以记录发送到从服务器的更新.当一个从服务器连接主
- 前情提要上文我们分析了挂载组件主要调用了三个函数: createComponentInstance(创建组件实例)、setupCompone
- 我就废话不多说了,大家还是直接看代码吧~package main import ("fmt""time&quo
- 其实和爬取普通数据本质一样,不过我们直接爬取数据会直接返回,爬取图片需要处理成二进制数据保存成图片格式(.jpg,.png等)的数据文本。现
- 1.定义在某些情况下,一个类的对象是有限且固定的,比如季节类,它只有 4 个对象;再比如行星类,目前只有 8 个对象。这种实例有限且固定的类
- 我们自己鼓捣mysql时,总免不了会遇到这个问题:插入中文字符出现乱码,虽然这是运维先给配好的环境,但是在自己机子上玩的时候咧,
- vue-loader和webpack项目配置及npm错误学习vue的同学都知道,想要生成一个vue项目,使用vue-cli脚手架工具直接生成
- 名片管理系统有两个模块组成:cards_main.py 和 cards_tools.py一个是主程序,另一个是封装增删改查函数的被调用程序代
- 很多时候我们都需要了解下python中导入包的属性方法信息,当然dir 是最便捷的了,不过如果想知道特定的,例如以_ 开头的属性,需要写个筛
- turtle的文档:https://docs.python.org/3/library/turtle.html用Python的turtle库
- 在零售、经济和金融等行业,数据总是由于货币和销售而不断变化,生成的所有数据都高度依赖于时间。如果这些数据没有时间戳或标记,实际上很难管理所有
- 目录背景什么是协程?什么是 gevent?协程的例子Q&AQ:gevent 无法捕获的耗时A:猴子补丁实践异步 requests 请
- W3C 发布 XPath 1.0 规范是在 1999 年,那时我还正在备战高考,不料十年后,我才开始学习XPath,落后的差距不是一般的大(
- 之前mysql用着好着,可是今天在启动mysql后输入密码出现了闪退,在任务管理器中发现mysql服务没有启动,当手动启动时提示拒绝访问。在
- 一、生命周期定义生命周期:又名:生命周期回调函数、生命周期函数、生命周期钩子生命周期是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数
- 方法一 delete from test; alter table `test` auto_increment=1 (好处,可以设置AUTO
- 一、前言 JDK(Java Development Kit )是一切java应用程序的基础,可以说,所有的java应用程序是构建
- 详解 Mysql查询结果顺序按 in() 中ID 的顺序排列实例代码:<select id="queryGBStyleByI
- python自带了日志模块logging,可以用来记录程序运行过程中的日志信息。同时python还有logbook模块用来取代logging
- MySQL Order By keyword是用来给记录中的数据进行分类的。MySQL Order By Keyword根据关键词分类ORD