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

chengbd 2019-05-09

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

chengbd

相关推荐

python调用百度API实现人脸识别

# """ 你的 APPID AK SK """. # img = Image.fromarray #将每一帧转为Image. # output_buffer = BytesIO() #创

pythonjw / 0评论 2020-11-17

PHP 实现base64编码文件上传出现问题详解

领导：小A同学，我们要做一个样本上传进行分析的功能，你看下是否使用base64编码加进去，这样客户端的同学就不需要用form-data方式来上传了，直接使用json格式就可以上报，可以让格式上报统一。本身的流程是一个很简单的文件转换成base64上传，再服

hedongli / 0评论 2020-09-01

关于java微信支付-&gt;申请退款接口回调 解密

微信支付的申请退款接口，可以设置notify_url参数，这个参数代表微信退款成功后调用商户自己的接口，当微信调用这个接口时，代表款项正式退给了付款方。根据观察，如果是微信零钱支付，调用申请退款接口后是秒退，如果是微信绑定的银行卡或信用卡支付，大概几分钟后

浪味仙 / 0评论 2020-08-17

18、Secret

Secret 解决了密码、token、密钥等敏感数据的配置问题，而不需要把这些敏感数据暴露到镜像或者 Pod Spec中。Secret 可以以 Volume 或者环境变量的方式使用。Opaque：base64编码格式的Secret，用来存储密码、密钥等。使

IT兄弟团 / 0评论 2020-08-01

Base64文件上传（Use C#）

Base64是网络上最常见的用于传输8Bit字节码的编码方式之一，它是一种基于64个可打印字符来表示二进制数据的方法。使用base64进行文件上传的具体流程是：前台使用js将文件转换为base64格式，后台通过高级编程语言，将base64格式的文件，转换为

凉白开 / 0评论 2020-07-19

Kubernetes-12：Secret介绍及演示

　　Secret解决了密码、token、密钥等敏感数据的配置问题，而不需要把这些敏感数据暴露到镜像或者Pod Spec中，可以以Volume或者环境变量的方式使用。　　Opaque：base64编码格式的Secret，用来存储密码、秘钥等。只要与Kuber

kjh00abc / 0评论 2020-07-08

PHP伪协议

write=<写链的筛选列表> //该参数可选。<两个链的筛选列表> //任何没有以 read= 或 write= 作前缀 的筛选器列表会视情况应用于读或写链。

Skyline / 0评论 2020-06-28

flask 简单编写一个验证登录的案例

token = base64.b64encode(":".join([str(uid), str(random.random()), str(time.time() + 7200)])). if not users.get(_token

苦咖啡flask / 0评论 2020-06-18

dart base64的编码与解码

import ‘dart:convert‘;String str = "encode str";List<int> bytes = utf8.encode(str);String encodedStr = base64Enc

万物weiyi / 0评论 2020-06-16

[记录点滴]在Ionic和Android中上传Blob图片

本文是开发中的简略记录，具体涉及知识点有：Blob，Ionic，Android和Lua。Blob表示二进制类型的大对象，通常是影像、声音或多媒体文件。另外，JavaScript 中的 File 接口是基于 Blob，继承 Blob 的功能并将其扩展使其支持

半纸药笺 / 0评论 2020-06-14

PHP实现本地图片转base64格式并上传

我们在开发系统时，处理图片上传是不可避免的，例如使用thinkphp的肯定很熟悉import;的上传方式，今天我们来讲一个使用html5 base64上传图片的方法。可以大概的讲一下思路，其实也挺简单。选择了图片之后，js会先把已选的图片转化为base64

chenhaimeimeng / 0评论 2020-06-13

请不要用php进行base64编码文件上传【转】

领导：小A同学，我们要做一个样本上传进行分析的功能，你看下是否使用base64编码加进去，这样客户端的同学就不需要用form-data方式来上传了，直接使用json格式就可以上报，可以让格式上报统一。本身的流程是一个很简单的文件转换成base64上传，再服

JF0 / 0评论 2020-06-13

python RSA加密，字节格式和base64编码格式

return crypt_text # 返回的是字节。lase_text = rsa.decrypt.decode() # 注意，这里如果结果是bytes类型，就需要进行decode()转化为str. #create_keys() # 生成公钥和私钥

逍遥友 / 0评论 2020-06-02

Python做加密接口的测试方法【多测师】

加密接口怎么测试？写个函数或者方法，把要加密的参数使用这个函数过滤一遍，等于就是说把数据丢进去，加密了之后，再通过这个加密好的数据传输过去就可以了！！==》看如下的代码。# data 必须参数，对应的值是正常传递的参数组装成json字符串，组装的json

kyelu / 0评论 2020-06-02

## H5 canvas画图白板踩坑

最近接手了一个小型的H5，最主要的功能大概就是拍照上传和canvas画板了。主要是记录一下自己菜到像傻子一样的技术。白板涂鸦的内容是以base64的形式传给后端工程师的，图片上传的图片是路径，后端要求统一格式，所以需要把路径转为base64。先说一下项目的

northwindx / 0评论 2020-05-31

python 实现AES加解密

AES 只是个基本算法，实现 AES 有几种模式，主要有 ECB、CBC、CFB 和 OFB CTR，直接上代码，此处为AES加密中的CBC模式，EBC模式与CBC模式相比，不需要iv。# AES加密时候得到的字符串不一定是ascii字符集的，输出到终端或

tengyuan / 0评论 2020-05-30

python 实现RSA公钥加密，私钥解密

from Crypto.Cipher import PKCS1_v1_5 as Cipher_pkcs1_v1_5. cipher_text = base64.b64encode(cipher.encrypt(message.encode())).deco

singer / 0评论 2020-05-30

Django JWT登录认证机制

在用户注册或登录后，我们想记录用户的登录状态，或者为用户创建身份认证的凭证。我们不再使用Session认证机制，而使用Json Web Token认证机制。JWT的声明一般被用来在身份提供者和服务提供者间传递被认证的用户身份信息，以便于从资源服务器获取资源

GreatZhou / 0评论 2020-05-28

JS进行Base64编码,MD5加密,URL编码实现快递鸟API接口签名验证

有网友留言说，想调用快递鸟API接口实现快递查询，但是又不懂后端开发，不懂JAVA，不懂PHP，不懂C#，也不懂python，问我能不实现快递接口查询，我说你会什么，他说,我只懂一点点JS，我回答他，已经足够了，我现在就来告诉你如何通过JS来实现600多家

coolhty / 0评论 2020-05-20

一日一技：如何在Python中加密密码

加密密码会将密码编码为随机字符序列。调用str.encode将密码str编码为UTF-8字符串。调用base64.b64encode将上一步中的utf_string编码为基本64字符串。调用base64.b64decode将b64_string解码回str

Phoenixor / 0评论 2020-05-19

使用GitHub的API实现文件上传--李渣渣（lizaza.cn）

最近搭建了一个自己的博客网站和一个在线图片格式转换工具，经常写博客的时候需要上传图片，在线转换工具也需要一定的空间来临时存放图片文件。服务器的存储空间又比较有限，于是就想着将图片存储的GitHub上，来节省服务器的空间。一开始使用的是PicGo来上传文件，

beibeijia / 0评论 2020-05-15

golang包快速生成base64验证码的方法

支持多种样式,算术,数字,字母,混合模式,语音模式.Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一。Base64编码可用于在HTTP环境下传递较长的标识信息, 直接把base64当成是字符串方式的数据就好了。减少了http请求；数据就是

小科的奋斗 / 0评论 2020-03-12

JAVA各种加密与解密方式

Base64 编码是我们程序开发中经常使用到的编码方法，它用 64 个可打印字符来表示二进制数据。这 64 个字符是：小写字母 a-z、大写字母 A-Z、数字 0-9、符号"+"、"/"，其他所有符号都转换成这个字符

田有朋 / 0评论 2020-05-08

Shiro反序列化漏洞检测、dnslog

pad = lambda s: s + ((BS - len(s) % BS) * chr(BS - len(s) % BS)).encode(). encryptor = AES.new(base64.b64decode(key), mode, iv).

visionzheng / 0评论 2020-05-05

Shiro RememberMe 1.2.4 反序列化命令执行漏洞复现

然而AES的密钥是硬编码的，就导致了攻击者可以构造恶意数据造成反序列化的RCE漏洞。前16字节的密钥-->后面加入序列化参数-->AES加密-->base64编码-->发送cookie. python shiro_shell.py

visionzheng / 0评论 2020-05-04

servlet安全

验证，用户名密码方式，证书方式。授权，已经通过验证的用户的访问级别，如网上商城有公用区，买家区(须登陆)。保密，敏感数据在互联网上传输时要加密。数据完整性，数据不能被篡改。声明后，servlet容器会负责验证和授权的过程。关闭浏览器是结束会话的唯一方式。摘

kong000dao0 / 0评论 2020-04-23

【canvas】 使用canvas压缩图片大小

由于各种大大小小的原因，自己最近经历了一些面试，其中有一个面试题是这样的，使用canvas怎样压缩图片大小。回去查资料，发现手机端在上传图片的时候，调起相机拍照的时候超过2m了，所以用到canvas压缩，优化用户体验。var arr = dataurl.s

xdyangxiaoromg / 0评论 2020-03-27

python 调用接口发短信

#接收传递进来的mobiles & content参数 如果第三方接口调用参数指定了这里mobile content可以进行修改。base64_before={"ecName":"常州市XXX院1", &qu

Lexan / 0评论 2020-03-08

python—base64

File "D:/python file/ctf/ctfhub http 基础认证密码/密码payload生成.py", line 12, in <module>. TypeError: a bytes-like objec

huavhuahua / 0评论 2020-03-03

php实现jwt

JWT是json web token缩写。它将用户信息加密到token里，服务器不保存任何用户信息。服务器通过使用保存的密钥验证token的正确性，只要正确即通过验证。基于token的身份验证可以替代传统的cookie+session身份验证方法。

清风徐来水波不兴 / 0评论 2020-03-01

convertto-securestring结果 使用python解密

根据微软帮助文档，convertto-securestring有两种加密模式。如果在指定密码的情况下，则使用aes加密，否则使用windows dpapi加密。而且aes加密也没有指明iv值与加密模式。加密完成后，iv通过base64存储，而加密后的数据，

CloudXli / 0评论 2020-01-12

前端大文件上传解决方案支持分片断点上传

最近遇见一个需要上传百兆大文件的需求，调研了七牛和腾讯云的切片分段上传功能，因此在此整理前端大文件上传相关功能的实现。在某些业务中，大文件上传是一个比较重要的交互场景，如上传入库比较大的Excel表格数据、上传影音文件等。下面从文件上传方式入手，整理大文件

MrHaoNan / 0评论 2019-12-31

javascript前端实现base64图片下载(兼容IE10+,chrome,firefox)

不是不兼容ie,就是不兼容ff,费了很多时间感谢原作者.在项目开发过程中，经常会有图片导出的需求，尤其是带有图表类的应用，通常需要将图表下载导出。但是这套逻辑在IE下是不行的，这样写会直接报错。// 截取base64的数据内容并解码为2进制数据。　　整体代

jjddrushi / 0评论 2019-12-27

python使用rsa非对称加密

# a. lemon_pub为PublicKey对象, lemon_priv为PrivateKey对象。# b. 512为秘钥的位数, 可以自定义指定, 例如: 128、256、512、1024、2048等。cryto_info = rsa.encrypt

taiyangshenniao / 0评论 2019-12-26

js实现图片预览、压缩、上传

1、获取表单信息2、转为base643、压缩base64通过canvas4、把base64转为文件对象5、AJAX提交信息

mmywcoco / 0评论 2019-12-25

前端性能优化

性能优化，一直作为前端的一个热点问题，作为一个优秀的前端开发人员，性能优化时必备技能。本文将从减少http请求次数、减少单次请求资源大小、渲染优化、资源加载优化等四个大方向，下分诸多小方向，全面总结常用前端优化方法。　　强缓存是利用http头中的Expir

GimmeS / 0评论 2019-12-15

canvas和base64

// Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.解决方案是不通过画布获

songfens / 0评论 2019-12-14

MarkDown添加图片的三种方式【华为云技术分享】

Markdown插图片有三种方法，各种Markdown编辑器的插图方式也都包含在这三种方法之内。只需要在基础语法的括号中填入图片的位置路径即可，支持绝对路径和相对路径。用base64转码工具把图片转成一段字符串，然后把字符串填到基础格式中链接的那个位置。如

James0 / 0评论 2019-12-10

Python中的Base64编码的加密与解密

由于某些系统中只能使用ASCII字符。Base64就是用来将非ASCII字符的数据转换成ASCII字符的一种方法。在网页图片传输中，一般在处理极小、极简的一些图片的时候可以使用到base64编码将图片直接写入css文件展示到网站上。在Python中你的Ba

katyusha / 0评论 2019-12-08

web文件上传下载组件

最近遇见一个需要上传百兆大文件的需求，调研了七牛和腾讯云的切片分段上传功能，因此在此整理前端大文件上传相关功能的实现。在某些业务中，大文件上传是一个比较重要的交互场景，如上传入库比较大的Excel表格数据、上传影音文件等。下面从文件上传方式入手，整理大文件

wwwxuewen / 0评论 2019-12-06

解决 canvas 下载含图片的画布时的报错

Uncaught DOMException: Failed to execute ‘toDataURL‘ on ‘HTMLCanvasElement‘: Tainted canvases may not be exported. 最近在做一个图片内容识别的

jinxiutong / 0评论 2019-12-03

vue中 iview的upload上传图片 获取本地图片绝对路径 在前端实现图片预览

在用iview的upload上传图片的时候，想要实现图片的预览。但是在iview给的例子中，是每上传一个图片触发一次上传事件，调一次接口，后台将图片存入数据库，再回传给前端，这样实现图片在前端的显示。这个方法对于上传多张图片，无疑很不现实。在图片上传前 '

WinerChopin / 0评论 2019-11-17

koa2--06.cookies的设置和使用

ctx.cookies.set;//设置cookie值，第一个参数为name，第二个为values,第三个为可选选项。console.log;// 转换成 base64 字符 串：aGVsbG8sIHdvcmxkIQ== console.log;// 还原

Qimingweikun / 0评论 2019-11-04

PHP保存Base64图片base64_decode的问题

PHP对Base64的支持非常好，有内置的base64_encode与base64_decode负责图片的Base64编码与解码。编码上，只要将图片流读取到，而后使用base64_encode进行进行编码即可得到。$img_info = getimages

JF0 / 0评论 2019-11-04

Python的 json 、 hashlib 、 Base64 模块

全称"JavaScript Object Notation" 它是一种基于文本，独立于语言的轻量级数据交换格式。json.dumps 　 　 将python数据转化为json indent 实现缩进，ensure_ascii 是否用

zluxingzhe / 0评论 2019-11-03

两道CTF Web的题目

尝试把 img 后面的参数用 flag.jpg、flag.php、flag 的base64编码代替后访问，并没有获取到有价值内容。直接访问 index.php 或者 show.php 也看不到任何东西，所以看看能不能利用 img 这个参数读取两个php源码

唐宋源码清 / 0评论 2019-10-26

css sprites 和 base64

网页图片处理的一种方式，它允许你将一个页面涉及到的所有零星图片都包含到一张大图中，当访问页面时，载入的图片就不会像以前那样一副一副的慢慢的显示出来了。优点：base64图片会随着HTML或者css一起下载到浏览器，减少了http请求。

waterv / 0评论 2019-10-24

14webpack之loader

loader是一种打包的方案，webpack默认只识别js结尾的文件，当遇到其他格式的文件后，webpack并不知道如何去处理。此时，我们可以定义一种规则，告诉webpack当他遇到某种格式的文件后，去求助于相应的loader。url-loader和fil

SelinaChan / 0评论 2019-10-24

接口测试加解密与多环境测试

加密通常代表是对称加密，这种加密是可以解密的。比如base64，主要用于的数据传输。签名通常代表是非对称加密，这种加密不可逆不可解密。通常用于认证内容未被篡改。

xiaoyezihanghui / 0评论 2019-10-23

js压缩图片后再将base64转换为file文件亲测可用

<button id="upload">上传图片</button><input type="file" name="input_file" id="inpu

大地飞鸿 / 0评论 2019-10-22