脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → base64 图片的二进制进行编码

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

 更新时间：2017年01月03日 16:52:15   投稿：lqh  
这篇文章主要介绍了使用base64对图片的二进制进行编码并用ajax进行显示的相关资料,需要的朋友可以参考下

使用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>

您可能感兴趣的文章:

相关文章

  • ES5 模拟 ES6 的 Symbol 实现私有成员功能示例

    ES5 模拟 ES6 的 Symbol 实现私有成员功能示例

    这篇文章主要介绍了ES5 模拟 ES6 的 Symbol 实现私有成员功能,结合实例形式分析了ES5 模拟 ES6 的 Symbol 实现私有成员功能相关原理、实现方法与操作注意事项,需要的朋友可以参考下
    2020-05-05
  • JavaScript Perfection kill 测试及答案

    JavaScript Perfection kill 测试及答案

    近日，在Perfection kill上看到有关javascript quiz。并做了一下，最终错了2个（#2，#9），但是，这2道题，在Ie和ff下的答案是不一样的？！
    2010-03-03
  • Vuex模块化应用实践示例

    Vuex模块化应用实践示例

    这篇文章主要介绍了Vuex模块化应用实践示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • 原生js实现页面滚动动画

    原生js实现页面滚动动画

    这篇文章主要为大家详细介绍了原生js实现页面滚动动画，使用了requestAnimationFrame，文中示例代码介绍的非常详细，具有一定的参考价值，感为兴趣的小伙伴们可以参考一下
    2022-01-01
  • 指定区域的图片自动按比例缩小的js代码（防止页面被图片撑破）

    指定区域的图片自动按比例缩小的js代码（防止页面被图片撑破）

    有时候我们更新的内容，有很多的大图片，就会导致页面变形或看不到全图。一般情况我们用css的max-width控制，但有些浏览器不支持，我们也可以用js做个补充
    2014-02-02
  • es6学习之解构时应该注意的点

    es6学习之解构时应该注意的点

    解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性赋给各种变量。这种赋值语法极度简洁，同时还比传统的属性访问方法更为清晰，下面这篇文章主要给大家介绍了关于在es6解构时应该注意的点，需要的朋友可以参考下。
    2017-08-08
  • 微信小程序之小豆瓣图书实例

    微信小程序之小豆瓣图书实例

    本篇文章主要介绍了微信小程序之小豆瓣图书实例，具有一定的参考价值，有兴趣的同学可以了解一下。
    2016-11-11
  • firefox火狐浏览器与与ie兼容的2个问题总结

    firefox火狐浏览器与与ie兼容的2个问题总结

    这几天遇到几个头疼的火狐与ie兼容问题整理下来，希望对需要的朋友有所帮助。
    2010-07-07
  • JS根据浏览器窗口大小实时动态改变网页文字大小的方法

    JS根据浏览器窗口大小实时动态改变网页文字大小的方法

    这篇文章主要介绍了JS根据浏览器窗口大小实时动态改变网页文字大小的方法,涉及JavaScript针对页面宽高的动态获取与元素样式动态运算的相关技巧,需要的朋友可以参考下
    2016-02-02
  • JS跨域之window.name实现的跨域数据传输

    JS跨域之window.name实现的跨域数据传输

    这篇文章主要介绍了JS跨域之window.name实现的跨域数据传输,需要的朋友可以参考下
    2022-01-01

最新评论