前端将图片二进制流显示在html端

在src中添加data:image/png;base64,+已经encode的二进制代码，就可以在网页端显示出图片

<!DOCTYPE html>
<html class=" ">
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel="icon" href="/favicon.ico"><title>显示图片</title>
</head><body class="">
<img src="https://img-blog.csdnimg.cn/2022010616344316707.png" alt='img'></body>
</html>

目前，Data URI scheme支持的类型有：

data:,文本数据

data:text/plain,文本数据

data:text/html,HTML代码

data:text/html;base64,base64编码的HTML代码

data:text/css,CSS代码

data:text/css;base64,base64编码的CSS代码

data:text/javascript,Javascript代码

data:text/javascript;base64,base64编码的Javascript代码

data:image/gif;base64,base64编码的gif图片数据

data:image/png;base64,base64编码的png图片数据

data:image/jpeg;base64,base64编码的jpeg图片数据

data:image/x-icon;base64,base64编码的icon图片数据

base64简单地说，它把一些 8-bit 数据翻译成标准 ASCII 字符，网上有很多免费的base64 编码和解码的工具，感兴趣，可以去查阅下相关资料

目前，IE8、Firfox、Chrome、Opera浏览器都支持这种小文件嵌入。

我们把图像二进制流文件的内容直接写在了HTML 文件中，这样做的好处是，节省了一个HTTP 请求。坏处呢，就是浏览器不会缓存这种图像。大家可以根据实际情况进行自由取舍。

另附python将图片转base64方法

# -*- coding: utf-8 -*-import base64with open("xx.png","rb") as f:# b64encode是编码，b64decode是解码base64_data = base64.b64encode(f.read())# base64.b64decode(base64data)print(base64_data)

或利用opencv

pic=cv2.imread('xx.jpg')
ret, jpeg = cv2.imencode('.jpg', pic)
frame = jpeg.tobytes()
base64_data = base64.b64encode(frame)
print(base64_data)

利用js改变img标签中的src

<!DOCTYPE html>
<html class=" ">
<head><meta charset="utf-8"><title>日常行为分析系统</title>
</head><body class="">
<img id="pic" /></body><script type="text/javascript">
var  url = "data:image/png;base64,";
var i = "iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMzTjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC";
setInterval(showPicture,100)
function showPicture(){document.getElementById("pic").src = url+ i;
}
</script></html>

利用ajax前后端交互，再加上定时器不停的刷新，前端界面即可实现动态刷新图片的效果

前端将图片二进制流显示在html端相关推荐

java 读取数据库图片二进制流并输出到jsp页面
最近刚好遇到这个问题,刚开始在网上各种搜索,看到大量有关该问题的博文. 大量文章有些不敢苟同,希望博主们要写就认真写,请不要浪费其他需要帮助的人的时间去验证你的博文是否正确. 正文如下: 流程说明: ...
记一次从Sql Server中图片二进制流还原回图片的开发过程
背景:最近在客户现场做项目上线时,需要数据迁移工作.客户之前用的一个BS桌面应用,其中关于图片的存储全部以二进制流的方式写入到Sql Server数据库表中的某个字段中,如下图所示,由于新开发应用采用 ...
python requests post 二进制流_Python的requests如何同时post图片二进制流和json数据application/octet-stream...
如何用post的方法以application/octet-stream的content-type提交json和文件呢,总是说文件类型错误写入图片该接口用于根据 spreadsheetToken 和 ...
html5 判断图片 exif,前端获取图片 exif 流信息
如果你是为了获取 exif 解析后的信息,那么你可以看这篇前端获取图片exif信息,通过 exif-js 来获取的. 看到这里你要懵逼了,我为什么又要写一遍.emmmm...因为我需求变了,直接拿到 ...
html加载文件流图片,js 读取图片文件流显示到页面上
thisimg=$("文件域"); src=$("图片标签"); function readAsDataURL(thisimg,src){ //检验是否为图像文 ...
springmvc使用谷歌captcha生成图片验证码，并将验证码图片以二进制流的方式返回给前端（app和pc端都能调用）
近期对登录注册与获取短信验证码的接口做了安全限制,其中一部分就用到了谷歌的captcha验证码,比如当用户连续三次登陆失败,那么之后的登录请求就需要用户输入谷歌的图形验证码.由于web端和app端调用 ...
vue项目，把图片文件流转为base64格式以图片形式展示在前端
问题描述前台需要展示图片,期望后台直接返回图片地址,但是后台给的是的文件流而不是一个图片地址,需要把文件流转为base64的格式展示出来. 请求后台接口时,返回图片内容如下: 上图不是base64格 ...
php+打开图片二进制文件,php图片文件、二进制流、base64格式相互转化
1,php 图片文件.二进制流.base64格式相互转化$image = 'E:/www/logo.png'; //图片文件地址 $type = getimagesize($image)['mime ...
前端实现图片查看器（滚轮放大，缩小，旋转）——Viewer.js
一.前端实现图片查看器(放大,缩小,旋转)--Viewer.js [附参考链接:(14条消息) Viewer.js第一次点击图片无法显示解决方案(vue使用)_李墨瞳的博客-CSDN博客] 1.0 J ...

前端将图片二进制流显示在html端

前端将图片二进制流显示在html端相关推荐

最新文章

热门文章