前端将图片二进制流显示在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 ...
随机推荐
- FAQ: SBS 2011. The Windows SBS Manager service terminated unexpectedly
Symptoms The Windows SBS Manager service is stopped with EventID 7034 every half an hour on SBS 2011 ...
- UBuntu安裝使用PIP
Windows下安裝python包還是比較方便的,直接在FLD網站下載對應的EXE文件就可以安裝,在linux系統下,使用pip,easy egg 管理工具可以減輕安裝負擔. 原文鏈接:http:// ...
- 三维投影总结：数学原理、投影几何、OpenGL教程、我的方法
如果要得到pose视图,除非有精密的测量方法,否则进行大量的样本采集时很耗时耗力的.可以采取一些取巧的方法,正如A Survey on Partial of 3d shapes,描述的,可以利用已得到 ...
- 实验1 OpenGL初识
实验预备知识 Windows下的OpenGL编程步骤简单介绍详见课程实验教学博客-实验准备安装GLUT包与创建工程: http://www.cnblogs.com/opengl/archive/201 ...
- css—文字渐变色
.text-gradient { display: inline-block; color: green; font-size: 10em; font-family: ´微软雅黑´; backgrou ...
- ES6的let命令
1.let命令所在的代码块内有效: 2.循环的计数器,就很合适使用let命令:(for循环还有一个特别之处,就是循环语句部分是一个父作用域,而循环体内部是一个单独的子作用域.) 例如:如下会输出十次s ...
- 如何在CorelDRAW中创建对象阴影
阴影工具可以为对象创建光线映射的阴影效果,使对象产生较强的立体感.可以为大多数对象或群组对象添加阴影,其中包括美术字.段落文本和位图.创建对象阴影可以增加视觉层次,使图形更加逼真. CorelDRAW ...
- 05 Django与Ajax
一.Ajax简介 AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”.即使用Javascript语言与服务器进行异步交互, ...
- 动态规划——Buyer
题目链接 题目描述 哆啦A梦班级举办个party,当然吃的东西必不可少,哆啦A梦负责采购任务,他得到了一份清单,上面注明不同食品的受欢迎程度,哆啦A梦需要用一定的价钱尽可能达到的更大的受欢迎程度!例如 ...
- python之子类调用父类的两种方式
第一种方式 直接在子类中调用父类名: Vehicle.__init__(self,name,speed,load,power)#调用父类的实例 Vehicle.run(self) #调用父类的方法 # ...