Html显示内存图片

最新推荐文章于 2022-09-08 00:56:58 发布

侃侃_天下

最新推荐文章于 2022-09-08 00:56:58 发布

阅读量2k

点赞数

分类专栏： JavaSE JavaEE

JavaSE 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

JavaEE

13 篇文章 0 订阅

订阅专栏

如何让网页里面的图片，直接从内存数据加载，而不是一个图片文件的链接

查了一些资料，基本概念如下：

1. Data URI scheme。这个概念参考：https://en.wikipedia.org/wiki/Data_URI_scheme

2. 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图片数据

3. 在 HTML 里面，图片通常是 <img src="http://www.abc.com/abc.jpg"> 这样的链接。这个链接也可以是本地文件。换成 Data URI scheme 的写法：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

上面的写法的格式是在 base64 后面，加上了 base64 编码的图片数据。这样就可以直接内嵌图片数据在网页里面，而不是引用外部文件。

先写一个 HTML 网页：

<html>
<head>
<script language="JavaScript">
function setImageData(imageBase64) {
    var myImg = document.getElementById("myImg");
    myImg.src = "data:image/jpeg;base64," + imageBase64;
}
</script>
</head>
<body>
<img id="myImg" src="https://img-blog.csdnimg.cn/2022010621142167533.jpeg" alt="My Image data in base 64" />

</body>
<html>

这个网页里面的 JS 用来对网页里面的 <img id="myImg"...> 填入数据。

转载：http://blog.csdn.net/pcplayer/article/details/69233523