前端将图片二进制流显示在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 ...
随机推荐
- DBGridEh checkbox的一个问题
function TCustomDBGridEh.CheckBeginRowMoving(MouseX, MouseY: Integer; CheckInOnly: Boolean): Boolean ...
- Kinect安装与配置(openNI2)
原文链接:http://blog.csdn.net/chenxin_130/article/details/8580636 简介 最近OpenNI2的推出,小斤也要多给博客除除草了,并在闲暇之余做一些 ...
- Kafka学习笔记(4)----Kafka的Leader Election
1. Zookeeper的基本操作 zookeeper中的节点可以持久化/有序的两个维度分为四种类型: PERSIST:持久化无序(保存在磁盘中) PERSIST_SEQUENTIAL:持久化有序递增 ...
- jq图片懒加载
jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度.在某些情况下,它也能帮助减轻服务器负载. 使用方法 引用jquery和jquery.lazyload.js ...
- 如何添加删除子网卡eth0:1(linux案例)
这种方法实现了单网卡多IP,我的系统是centos7的,如何添加删除子网卡IP详细请看下面操作例子 添加子网卡IP:ifconfig ens3:1 192.168.0.100/24 ...
- jmeter出现乱码怎么解决
本文是抄袭安大叔的性能 如果想在性能获得更好的发展 请添加公众号:测试那点事 大叔的群号:435092293 大叔曾经担任百度技术总监 很牛逼 相信大叔知道了不会怪我 毕竟我是你的学 ...
- GDI 线段绘制示例程序
#include <windows.h> #include <strsafe.h> #include <stack> typedef struct tagLINE ...
- 【BZOJ2806】【CTSC2012】Cheat - 广义后缀自动机+单调队列优化DP
题意: Description Input 第一行两个整数N,M表示待检查的作文数量,和小强的标准作文库的行数 接下来M行的01串,表示标准作文库 接下来N行的01串,表示N篇作文 Output N行 ...
- [luogu2081 NOI2012] 迷失游乐园 (树形期望dp 基环树)
传送门 题目描述 放假了,小Z觉得呆在家里特别无聊,于是决定一个人去游乐园玩. 进入游乐园后,小Z看了看游乐园的地图,发现可以将游乐园抽象成有n个景点.m条道路的无向连通图,且该图中至多有一个环(即m ...
- 搞定PHP面试 - 深入了解引用
1. 什么是引用 在 PHP 中引用是指用不同的名字访问同一个变量内容.PHP 中的变量名和变量内容是不一样的, 因此同样的内容可以有不同的名字.最接近的比喻是 Unix 的文件名和文件本身--变量名 ...