`
benjaminebug
  • 浏览: 1360 次
文章分类
社区版块
存档分类
最新评论

Html 镶入 图片 Base64 编码

阅读更多
因工作需要需要将html页面中的图片镶入页面中。
上网看了两三个例子。其都有点错误。
随便写如下的内容
验证的环境 jre6 eclipse helios

其中有例子如

Html代码 
<h3>hello html5</h3> 
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAALVBMVEXM3fm+1Pfb5/rF2fjw9f23z/aavPOhwfTp8PyTt/L3+v7T4vqMs/K7zP////+qRWzhAAAAXElEQVQIW2O4CwUM996BwVskxtOqd++2rwMyPI+ve31GD8h4Madqz2mwms5jZ/aBGS/mHIDoen3m+DowY8/hOVUgxusz+zqPg7SvPA1UxQfSvu/du0YUK2AMmDMA5H1qhVX33T8AAAAASUVORK5CYII="> 

其中的例子指出iVBORw...后面的信息就是图片的信息,即 输出的必跟在其后。

实际环境IE9中
编写的
(并不是前缀带有iVBORw),其中data:image/jpg;base64,后面的字符可根据Base64的实现工具类 encode
如  BASE64Encoder encoder = new BASE64Encoder();
   encoder.encode(bytes);// bytes 类型为byte[] 为图片文件流读取的二进制数组




验证生成的base64编码图片html页面
html代码如下
<img src="data:image/jpg;base64,R0lGODlhMAAwAPcAAOf1/XqHjtnHu//78694aP3axPvb1f3r2/rSvauZlpBGLJijpvn//82CZ+zd
2emllfPz9Pm5qv/+/7lqUv7UwLjIzbpkTbm7vNjj6v3r1cl8af7z7f7w3LmJev318/7r49TMydaI
a8WKcfzk2oqaoaFbQsmVj4WTmpJXSP3OvdWNcfr6+9iReJSco6Smqf/5+deyqNXc57K8xNfk9v/x
4/3u6sZrVcnT13F0d+3j161pVfz8/Ovr6/vNxf7ezv36/f/k0f/++/XUwbqjlsR0XPjGr/TZzPTK
tMiVfJqrs8fIydeciP/8//bp4sNzU+SWeP///f7YyuO6rbxxU/Xq02gzI9J8ZP/dyfPgyue/u/7h
zfXk0dR9Xfz//4aFiNejk+3Wx+TTzHQrE/n5/cW0qenRuoSOlPn++uzNwuTNyplkV/TEsvfaxOvT
zJSYmLiBbODFuqhiTf/m1fT89P/h0bt0W9i3s/Hs6dDR0baoo4xuae/Pu/b//97SzNSnoeXRx4+h
qs6ckfX3/P/86v/fy+S8pMi7ueLh4fX/+cp1Wv/7+qissNmxm9iqjvb7/Pneyfnn1oI8Iurj4ezE
tf7nzt/LvnR+g8LO0vXy49ve3855XfHKu/rayOm8rfj3+ePPw/7g1eHt9MWqpPv8/uXCrevbzvH/
//z8+uCzosx/U9PV2bNyUODFstTb3Pni0t/m7PL7+v79/f/bzfrizu21n//45O7w8Pz/+v/iyPrW
xv/99/rnzvHp2dCDWvjd0P7m4JyJgdnV1ch1Vbx5YvjMsODHwU1JTfvDsOrJtqB+Y7VvXp2Eef//
9/T5++bo7frj1sd7XvKrn+3ew6pyX/n/8bF4W/zgys+xnvPj4/DFvPf38aOdn8BvU/XVy/zczvHo
17+DX/fvyu7ivPjt7e7t4cN6UePizp6wuNOTb+PY0cyJgfy7rdKNf7x3TufLs+jIvvz89r+WgKGJ
f92el9HCvNXDr/L7//L/+8GfjOarpcWqmfvqzrx3Vt62qvjlyf///yH/C1hNUCBEYXRhWE1QPD94
cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1w
bWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4w
LWMwNjAgNjEuMTM0Nzc3LCAyMDEwLzAyLzEyLTE3OjMyOjAwICAgICAgICAiPiA8cmRmOlJERiB4
bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8
cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXBSaWdodHM9Imh0dHA6Ly9ucy5h
ZG9iZS5jb20veGFwLzEuMC9yaWdodHMvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNv
bS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9z
VHlwZS9SZXNvdXJjZVJlZiMiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4w
LyIgeG1wUmlnaHRzOk1hcmtlZD0iRmFsc2UiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDgw
QTlFOTBEMzk2MTFERkIxNThDQjI1NzNFODVBQ0QiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6
NDgwQTlFOEZEMzk2MTFERkIxNThDQjI1NzNFODVBQ0QiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUg
UGhvdG9zaG9wIENTMiBXaW5kb3dzIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNl
SUQ9InhtcC5paWQ6RjY1MDdFQzlEMkI1MTFERjlFRkRCNkM3MjRCQTI1M0IiIHN0UmVmOmRvY3Vt
ZW50SUQ9InhtcC5kaWQ6RjY1MDdFQ0FEMkI1MTFERjlFRkRCNkM3MjRCQTI1M0IiLz4gPC9yZGY6
RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4B
//79/Pv6+fj39vX08/Lx8O/u7ezr6uno5+bl5OPi4eDf3t3c29rZ2NfW1dTT0tHQz87NzMvKycjH
xsXEw8LBwL++vby7urm4t7a1tLOysbCvrq2sq6qpqKempaSjoqGgn56dnJuamZiXlpWUk5KRkI+O
jYyLiomIh4aFhIOCgYB/fn18e3p5eHd2dXRzcnFwb25tbGtqaWhnZmVkY2JhYF9eXVxbWllYV1ZV
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
54EnHAEBW9jiDpKAOA/mYAuGN9wWGAV0UgICADs=">


其中的Data URI scheme(RFC2397)支持的类型如下
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图片数据

具体可参考http://www.ietf.org/rfc/rfc2397.txt 《 The "data" URL scheme》
分享到:
评论

相关推荐

    labview 图片缩放 base64编码base64解码

    在实际应用中,这些技术可能结合在一起,比如,你可能需要先缩放图片,然后进行Base64编码,以便将其嵌入到HTML页面或通过邮件发送。反之,接收到Base64编码的图片后,可以先解码,再进行显示或进一步的处理。 为了...

    QT图片BAse64编码与解码

    在实际应用中,Base64编码常用于将图片嵌入HTML、CSS或JavaScript中,或者在网络协议如HTTP中传输二进制数据。了解并熟练掌握这一技术对于任何涉及网络通信和数据存储的QT项目都至关重要。同时,由于Base64编码增加...

    将图片进行Base64编码后传输

    "将图片进行Base64编码后传输"是一种高效且便捷的方式,它允许我们直接将图片数据嵌入到文本格式中,方便在网络中传递。这种技术广泛应用于JSON API、HTML页面以及任何不支持二进制数据流的系统。 Base64是一种编码...

    图片base64编码 ocr识别图片文字信息

    在IT行业中,图片Base64编码是一种常见的数据传输和存储方式,它将图片转换成文本字符串,便于在网络中传输,特别是在处理小程序等轻量级应用时尤为常见。OCR(Optical Character Recognition,光学字符识别)技术则...

    二维码生成 图片Base64编码解码

    比如,一个网页可能需要展示二维码,但出于传输效率考虑,可以选择将二维码图片编码为Base64字符串嵌入HTML中,而不是链接到一个单独的图片文件。这样,用户无需额外请求,图片就能直接在页面加载时显示出来。 总之...

    js对图片base64编码字符串进行解码并输出图像示例

    在本示例中,我们讨论的是如何使用JavaScript对基于Base64编码的图片进行解码并显示在网页上。Base64是一种用于将二进制数据编码为ASCII字符串的编码方式,它在传输或存储非文本数据时非常有用,例如图片。 在HTML...

    易语言 base64编码转图片 如何 提高转换速度.zip

    在IT行业中,Base64编码是一种常见的数据编码方式,它将二进制数据转化为可打印的ASCII字符,常用于在网络上传输图片、音频或视频等非文本数据。易语言作为一款中国本土化的编程语言,提供了处理Base64编码的功能。...

    Android图片的Base64编码与解码及解码Base64图片方法

    在Android开发中,有时我们需要将图片转换为Base64编码的形式以便在网络传输或者存储时使用。Base64编码是一种常见的二进制数据转化为文本的方法,它通过使用64个可打印字符来表示原本的二进制数据,使得数据可以在...

    js 显示base64编码的二进制流网页图片

    在HTML中显示Base64编码的图片通常有两种方式。第一种是通过传统的标签,将图片地址指向服务器上的文件路径,如:***" /&gt;。第二种则是使用Data URI scheme直接在标签中嵌入Base64编码后的图片数据,如下所示:;base...

    vb 图片转base64编码 程序源码

    【程序老媛出品,必属精品,亲测校正,...资源名:vb 图片转base64编码 程序源码 资源类型:程序源代码 源码说明: 基于vb编写的实现图片转base64编码程序源码 非常适合借鉴学习 适合人群:新手及有一定经验的开发人员

    易语言汇编base64编码

    Base64编码是一种在网络上传输二进制数据时常用的数据编码方式,它将任意二进制数据转化为可打印的ASCII字符,方便在网络协议如电子邮件中传输。 Base64编码的基本原理是将每3个8位字节(24位)的数据转换成4个6位...

    Base64编码与图片互转

    Base64编码与图片互转

    base64编码解码离线工具

    Base64编码是一种在网络上传输二进制数据时常用的编码方式,它将任意二进制数据转换成可打印的ASCII字符序列。这种编码方法最初是为了在电子邮件系统中传输非ASCII字符而设计的,如今在很多场景下都有应用,如图片...

    IOS-图片编码-Base64-例子

    在"IOS-图片编码-Base64-例子"这个主题中,我们将深入探讨如何在iOS应用中实现Base64编码和解码图片。 首先,我们要了解Base64的基本原理。Base64使用的字符集包括大小写字母(A-Z, a-z)、数字(0-9)以及两个特殊...

    图片流转存Base64编码然后转图片 Spring 框下的

    本篇将详细讲解如何在Spring框架下,将图片流转存为Base64编码,并从Base64编码还原回图片。 首先,我们需要理解什么是图片流和Base64编码。图片流是指图片数据的一种序列化形式,它可以是字节流或字符流,通常用于...

    JAVA将图片转换为Base64编码

    JAVA将图片转换为Base64编码 在本文中,我们将讨论如何使用Java将图片转换为Base64编码。Base64编码是一种常用的数据编码方式,广泛应用于网络传输、数据存储等领域。下面我们将详细介绍如何使用Java实现图片到Base...

    Base64编码解码工具

    Base64编码是一种在互联网上常见的数据编码方式,主要用于在电子邮件、HTML或XML等文本格式中传输二进制数据。这种编码方式将任意的8位字节序列转换为特定的可打印ASCII字符序列,通常由字母、数字、加号(+)和斜线...

    Base64.zip_labview base64

    Base64是一种常见的数据编码方式,它将任意的二进制数据转化为可打印的ASCII字符序列,常用于在电子邮件、HTML或JSON等不支持二进制传输的环境中传递数据。在LabVIEW中,通常我们可以通过编写自定义VI来实现Base64的...

    IOS图片BASE64编码解码

    1. **网络请求**:在HTTP请求中,可以将图片编码为BASE64字符串,以文本形式传输,减少对MIME类型的依赖。 2. **本地存储**:将图片数据以BASE64字符串的形式保存在数据库或文件中,便于读写。 3. **JSON数据交换**...

    JSP severlet 动态 base64 编码 图片 显示处理

    在实际应用中,可以通过读取图片文件并使用 Java 的 Base64 编码类库来实现动态编码,并将编码后的字符串插入到 HTML 中,以实现在网页上直接显示 Base64 编码的图片。 综上所述,Base64 编码在 Web 开发中有着广泛...

Global site tag (gtag.js) - Google Analytics