前端将图片二进制流显示在html端
工作中碰到的问题,在处理接口返回的验证码图片时,由于返回的是encode编码代码,在js端获取到数据之后,通过函数encodeURI()来进行解码,之后可以通过在src中设置来实现图片显示: aaarticlea/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAAoCAIAAAC6iKlyAAAFL0lEQVR42u3Zb2hXVRgH8EsbGoNe%0D%0ABJWmKeGcL1TajKGbmlGjjAWDRstQ7IWoc%2BALw6SgF669iWqRYKUuCWJtGDrDSCgkN6SUEnHG1PbC%0D%0AgVgJib5okkZ%2F7IEnHp7Ouee5zzn33LsJHb778dv9nXt%2Fd5%2Ffw3PP%2FS25dduO6rH%2Bp4%2F9UeY7ftva%0D%0AjAnYN4Gfrp0vQm5H65Kh84gn9Ay5MSvrL1AmrfLiXRsAGh6NNOzrN7ZMyOl98MwUCD7%2F%2FLXLSeok%0D%0AEofnHL04%2BrXDVa1nTsMjJH9Fg3Xq9g0..." alt="" />
<img src="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAAoCAIAAAC6iKlyAAAFL0lEQVR42u3Zb2hXVRgH8EsbGoNe%0D%0ABJWmKeGcL1TajKGbmlGjjAWDRstQ7IWoc%2BALw6SgF669iWqRYKUuCWJtGDrDSCgkN6SUEnHG1PbC%0D%0AgVgJib5okkZ%2F7IEnHp7Ouee5zzn33LsJHb778dv9nXt%2Fd5%2Ffw3PP%2FS25dduO6rH%2Bp4%2F9UeY7ftva%0D%0AjAnYN4Gfrp0vQm5H65Kh84gn9Ay5MSvrL1AmrfLiXRsAGh6NNOzrN7ZMyOl98MwUCD7%2F%2FLXLSeok%0D%0AEofnHL04%2BrXDVa1nTsMjJH9Fg3Xq9g0...">
实现方法: 在src前添加data:image/jpeg;base64,+已经encode的二进制代码,就可以在网页端显示出图片,效果如图: 不过这么长串的二进制字符直接展示在html里实在不是上上之选,希望有条件的话可以让后台进行转码,直接获取src地址才是相对友好的方法。
前端将图片二进制流显示在html端的更多相关文章
- php canvas 前端JS压缩,获取图片二进制流数据并上传
<?php if(isset($_GET['upload']) && $_GET['upload'] == 'img'){ //二进制数据流 $data = file_get_c ...
- 用NOPI将图片二进制流导出到Excel
这儿采取的是将图片的二进制流导出到Excel,直接上代码: /// <summary> /// DataTable导出到Excel的MemoryStream /// </summar ...
- C#MVC使用二进制流显示图片
关于显示图片的最好方法当然是img 的src直接指向地址,简单实用.但是有时候也会使用到使用图片流显示图片的方法.实现也比较简单(在C# mvc中,java的不了解).具体如下: 1.前台cshtml ...
- GDI+ Image 读取内存二进制流显示图片
int iBmpSize = cd.nTotleLen; HGLOBAL hMemBmp = GlobalAlloc(GMEM_FIXED, iBmpSize); IStream* pStmBmp = ...
- java处理金证中登查询图片二进制流问题
package com.szkingdom.kess.model; import java.io.File; import java.io.FileOutputStream; import java. ...
- 前端Blob对二进制流数据的处理方式
var xhr = new XMLHttpRequest(); xhr.open("post", "/login/getCaptcher?t=" + Math. ...
- 如何显示二进制流的图片(利用img控件)
之前在http://www.cnblogs.com/JsonZhangAA/p/5568575.html博文中是利用的image控件来显示的二进制流图片,我现在想的是能 通过普通的<img id ...
- CEF 自定义用户协议(scheme)实现以二进制流的方式显示图片、视频、音频
转载:https://www.cnblogs.com/sinceret/p/10417941.html 转载:https://stackoverflow.com/questions/48811756/ ...
- 接收二进制流(ArrayBuffer) ,并且显示二进制流图片
1.调用接口,返回二进制流数据 var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { && xhr ...
随机推荐
- 打开word2010每次都要配置进度的解决办法
作者:朱金灿 来源:http://blog.csdn.net/clever101 不小心把ms office2010搞坏了,于是重装ms office2010,结果一打开word文档时总是出现下面的对 ...
- XML DTD跟SCHEMA约束 语法了解
dtd语法 元素: <!Element 元素名称 数据类型|包含内容> 数据类型: #PCDATA:普通文本 使用的时候一般用()引起来 包含内容: 该元素下可以出现哪些元素, 用()引起 ...
- 在redhat6.4上编译z3求解器
因为项目需要,我们使用到了微软的z3求解器求约束,但是z3求解器在红帽平台上并没有发布编译好的二进制版本,而我们的运行环境是红帽的企业版6.4,因此需要自己编译相应的二进制. z3是由微软公司开发的一 ...
- 【Oracle】DG中 Switchover 主、备切换
操作系统:OEL 5.6 数据库版本:Oracle11gR2 11.2.0.4.0 Switchover切换要求主库和备库在数据同步情况下进行,是主备之间的正常切换,主要用于日常维护.灾备演练等.切 ...
- 【Oracle】闪回drop后的表
本文介绍的闪回方式只适用于:删除表的表空间非system,drop语句中没有purge关键字(以上两种情况的误删除操作只能通过日志找回): 1.删除表后直接从回收站闪回 SCOTT@LGR> d ...
- ACM___数学___九的余数
九的余数 时间限制:3000 ms | 内存限制:65535 KB 难度:3 描述 现在给你一个自然数n,它的位数小于等于一百万,现在你要做的就是求出这个数整除九之后的余 ...
- Windows Phone 编程: 摇一摇 效果
Step 1: 下载摇晃手势开发库 http://create.msdn.com/en-us/edu ... ake_Gesture_LibraryStep 2: 解压后进入 ShakeGesture ...
- 【PYTHON】编码是个细致活
python逆向获取DNS时用到一个函数socket.gethostbyaddr,传入本地主机地址后报错如下: UnicodeDecodeError: 'utf-8' codec can't deco ...
- Kafka学习笔记(6)----Kafka使用Producer发送消息
1. Kafka的Producer 不论将kafka作为什么样的用途,都少不了的向Broker发送数据或接受数据,Producer就是用于向Kafka发送数据.如下: 2. 添加依赖 pom.xml文 ...
- Java中方法重载
方法重载:指在同一个类中,允许存在一个以上的同名方法,只要它们的参数列表不同即可,与修饰符和返回值类型无关. 参数列表:个数不同,数据类型不同,顺序不同. 重载方法调用:JVM通过方法的参数列表,调用 ...