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


Posted in Javascript onJanuary 03, 2017

使用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>
Javascript 相关文章推荐
JQuery入门—编写一个简单的JQuery应用案例
Jan 03 Javascript
终于解决了IE8不支持数组的indexOf方法
Apr 03 Javascript
利用javascript打开模态对话框(示例代码)
Jan 11 Javascript
jsPDF生成pdf后在网页展示实例
Jan 16 Javascript
使用JS取得焦点(focus)元素代码
Mar 22 Javascript
js限制文本框只能输入整数或者带小数点的数字
Apr 27 Javascript
jQuery蓝色风格滑动导航栏代码分享
Aug 19 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
Sep 18 Javascript
浅谈Angular中ngModel的$render
Oct 24 Javascript
微信小程序之页面跳转和参数传递的实现
Sep 29 Javascript
vue使用keep-alive实现数据缓存不刷新
Oct 21 Javascript
javascript深拷贝、浅拷贝和循环引用深入理解
May 27 Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
Jan 03 #Javascript
原生JS实现在线问卷调查投票特效
Jan 03 #Javascript
详解angular中如何监控dom渲染完毕
Jan 03 #Javascript
Node.js学习入门
Jan 03 #Javascript
通过AngularJS实现图片上传及缩略图展示示例
Jan 03 #Javascript
DWR3 访问WEB元素的两种方法实例详解
Jan 03 #Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
Jan 03 #Javascript
You might like
php下实现一个阿拉伯数字转中文数字的函数
2008/07/10 PHP
PHP CodeBase:将时间显示为&quot;刚刚&quot;&quot;n分钟/小时前&quot;的方法详解
2013/06/06 PHP
thinkPHP js文件中U方法不被解析问题的解决方法
2016/12/05 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
ThinkPhP+Apache+PHPstorm整合框架流程图解
2020/11/23 PHP
IE autocomplete internet explorer's autocomplete
2007/06/30 Javascript
基于jquery的图片懒加载js
2010/06/30 Javascript
JQuery里面的几种选择器 查找满足条件的元素$(&quot;#控件ID&quot;)
2011/08/23 Javascript
jquery键盘事件使用介绍
2011/11/01 Javascript
基于JQuery的模拟苹果桌面Dock效果(稳定版)
2012/10/15 Javascript
ie下jquery.getJSON的缓存问题的处理方法
2013/03/29 Javascript
JavaScript中的this关键字介绍与使用实例
2013/06/21 Javascript
通过onmouseover选项卡实现img图片的变化
2014/02/12 Javascript
jquery中live()方法和bind()方法区别分析
2016/06/23 Javascript
JS控制HTML元素的显示和隐藏的两种方法
2016/09/27 Javascript
Javascript数组中push方法用法分析
2016/10/31 Javascript
JavaScript中清空数组的方法总结
2016/12/02 Javascript
Angular2学习笔记——详解路由器模型(Router)
2016/12/02 Javascript
JavaScript基于扩展String实现替换字符串中index处字符的方法
2017/06/13 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
2017/09/26 Javascript
vue-cli中打包图片路径错误的解决方法
2017/10/26 Javascript
three.js实现圆柱体
2018/12/30 Javascript
详解vue中this.$emit()的返回值是什么
2019/04/07 Javascript
vue-cli3.X快速创建项目的方法步骤
2019/11/14 Javascript
python使用fcntl模块实现程序加锁功能示例
2017/06/23 Python
学生信息管理系统python版
2018/10/17 Python
python实现一组典型数据格式转换
2018/12/15 Python
pytorch 在sequential中使用view来reshape的例子
2019/08/20 Python
python3.8下载及安装步骤详解
2020/01/15 Python
Python semaphore evevt生产者消费者模型原理解析
2020/03/18 Python
Python爬虫爬取电影票房数据及图表展示操作示例
2020/03/27 Python
pyautogui自动化控制鼠标和键盘操作的步骤
2020/04/01 Python
Python pysnmp使用方法及代码实例
2020/08/24 Python
2014两会优秀的心得体会范文
2014/03/17 职场文书
工会趣味活动方案
2014/08/18 职场文书
2014年底个人工作总结
2015/03/10 职场文书