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

最新推荐文章于 2024-07-22 09:37:18 发布

blog_1103

最新推荐文章于 2024-07-22 09:37:18 发布

阅读量2.1w

点赞数 7

分类专栏：前端

本文链接：https://blog.csdn.net/qq_42393859/article/details/102395619

版权

本文介绍了如何通过Base64编码将图片二进制流直接在HTML页面上显示，详细列举了Data URI scheme支持的数据类型，并提到了其节省HTTP请求但不被缓存的特性。此外，提供了使用Python和OpenCV转换图片为Base64的方法，以及利用JavaScript和Ajax实现实时刷新图片的技巧。

摘要由CSDN通过智能技术生成

在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代码