前端将图片二进制流显示在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 ...
随机推荐
- less常用方法
最近在开发中使用了less,总结一下less一些常用的方法: 1.可以定义变量 SASS允许使用变量,所有变量以$开头. $blue : #1875e7; div { color : $blue; } ...
- PowerDesigner 逆向工程Non SQL Error : Could not load class com.mysql.jdbc.Driver
建立与数据库的连接. 在菜单条上,有一个Database的选择项: 选择connect…后弹出设置对话框: 在Data source里选择第三个单选按钮,即Connection profile:后,点 ...
- Verilog之$sreadmemb
1 Memories Memories file format is shown below, the address is specified as @ <address> in he ...
- 巧用Ajax的beforeSend提高用户体验
jQuery是经常使用的一个开源js框架,其中的$.ajax请求中有一个beforeSend方法,用于在向服务器发送请求前执行一些动作. $.ajax({ beforeSend:function(){ ...
- Java的编译与运行
编译: 是指将我们编写的Java源文件翻译成JVM认识的 .class 文件, 在这个过程中,javac 编译器会检查我们所写的程序是否有错误,有错误就会提示出来,如果没有错误就会编译成功. 运行: ...
- Python3与2的故事一
print函数:(Python3中print为一个函数,必须用括号括起来:Python2中print为class) Python 2 的 print 声明已经被 print() 函数取代了,这意味着我 ...
- 路飞学城Python-Day100
Django项目之图书馆项目 1.项目架构 2.表结构设计 from django.db import models # Create your models here. #作者详情表 class A ...
- MaterialDesign动画
一.概述 MaterialDesign设计理念 MaterialDesign动画 二.实例讲解 (1)Touch Feedback (2)Reveal Effect (3)Activity Trans ...
- Css进阶练习(实现抽屉网样式布局)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 关于linux系统的sendmail使用中的问题与解决
系统环境是ubuntu16.04 安装 sudo apt-get install sendmail 检查运行情况 sudo service sendmail status 结果如下,表示正在运行 ● ...