将任意格式的文件用BASE64编码后嵌入到单文件静态网页里面,浏览器打开

作者&投稿:容矿 (若有异议请与网页底部的电邮联系)
如何通过js将一base64编码的图片显示在html中~

要完成这个效果,有以下几步:
将图片转化为base64编码格式。
输入
var img = new Image();//创建img容器
img.src=‘这儿就是复制填写上面那一大串’;//给img容器引入base64的图片

3.最后一步:
document.body.appendChild(img);//将img容器添加到html的节点中就行了。

简介:
JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。
在1995年时,由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作,Netscape管理层希望它外观看起来像Java,因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。
为了取得技术优势,微软推出了JScript,CEnvi推出ScriptEase,与JavaScript同样可在浏览器上运行。为了统一规格,因为JavaScript兼容于ECMA标准,因此也称为ECMAScript。

base64简单地说,它把一些 8-bit 数据翻译成标准 ASCII 字符,我们把图像文件的内容直接写在了HTML 文件中,这样做的好处是,节省了一个HTTP 请求
Data URI scheme。
Data URI scheme是在RFC2397中定义的,目的是将一些小的数据,直接嵌入到网页中,从而不用再从外部文件载入。比如上面那串字符,其实是一张小图片,将这些字符复制黏贴到火狐的地址栏中并转到,就能看到它了,一张2*2的白色gif图片。
在上面的Data URI中,data表示取得数据的协定名称,image/gif是数据类型名称,base64 是数据的编码方法,逗号后面就是这个image/gif文件base64编码后的数据。
目前,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 编码和解码的工具,在PHP中可以用函数base64_encode() 进行编码,如echo base64_encode(file_get_contents(‘images/log.gif”'));
目前,IE8、Firfox、Chrome、Opera浏览器都支持这种小文件嵌入。
举个图片的例子:
网页中一张图片可以这样显示:
代码如下:


也可以这样显示:
代码如下:


我们把图像文件的内容直接写在了HTML 文件中,这样做的好处是,节省了一个HTTP 请求。坏处呢,就是浏览器不会缓存这种图像。

如果不用后台,图片的话可以用canvas.toDataURL方法获得图片的base64字符串(取得的其实是图片的目前的显示数据流而不是源文件数据,故不涉及同源策略问题)。
但如果是任意文件,貌似无解,这里涉及同源策略问题,即一个(不受控)的网站,通过前端页面,通过js读取本地(非同源)任意文件,得到这个文件的内容。也就是说,你的要求其实可以看作,用任意网站,可以在未授权的情况下,读取你操作系统关键的配置文件,想想也是很不安全的事件对吧。这个功能应该需要浏览器插件授权支持。

============================================
不过我在网站上找到这个代码,以本地打开的方式运行是可以实现你要的功能的。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="在线Base64生成转换小工具,可以实现任意文件转Base64 Data-URI编码,文件往页面中一拖即可。" />
<meta name="keywords" content="base64, FileReader, readAsDataURL, 文件" />
<meta name="author" content="谢勇彬,XYB" />
<title>任意文件转base64-直接拖进来</title>
<style>
body { word-break: break-all; margin: 0 1em; min-height: 100vh; font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace; overflow: hidden;}
.empty::before{position: absolute; font-size: 50px; content: '任意文件\A拖到这里'; white-space: pre; left: 50%; top: 50%; transform: translate(-50%,-50%); color: gray;}
</style>
</head>
<body class="empty">
<script>
window.addEventListener("dragenter", function(event) { event.preventDefault(); }, false);
window.addEventListener("dragover", function(event) { event.preventDefault(); }, false);
window.addEventListener("drop", function(event) {
var reader = new FileReader();
reader.onload = function(e) {
document.body.insertAdjacentHTML("afterBegin", '<p>' + e.target.result + '</p>');
document.body.classList.remove('empty');
};
reader.readAsDataURL(event.dataTransfer.files[0]);
event.preventDefault();
}, false);
</script>

</body>
</html>


bvf格式的文件是什么
是个录音文件,应该是录音笔录的

copy\/b命令
copy\/b命令 命令格式:copy\/b 空格 文件1+文件2+……  空格 文件N合并后的文件名( 注意使用时加空格的位置。 )命令讲解:使用”+”将多个相同或不同格式的文件合并为一个文件。例:COPY\/B 1.MPG+2.MPG 3.MPG,即把视频1.MPG和2.MPG合并为3.MPG COPY\/B DISK1.TS...

Ctrl+快捷键使用方法
Ctrl+快捷键使用方法 Ctrl+A选择整个工作表 Ctrl+B应用或取消加粗格式设置 Ctrl+C 复制选定的单元格 Ctrl+D 使用[向下填充]命令将选定范围内最顶层单元格的内容和格式复制到下面的单元格中Ctrl+F显示[查找]对话框 Ctrl+G显示[定位]对话框 Ctrl+H显示[查找和替换]对话框 Ctrl+S 使用其当前文件名、位置和格式...

能告诉我电脑文件的拓展名吗?
ANS ANSI文本文件ANT SimAnt For Windows中保存的游戏文件API Adobe Acrobat使用的应用程序设计接口文件APR Lotus Approach 97文件APS Microsoft Visual C++文件ARC LH ARC的压缩档案文件ARI Aristotle声音文件ARJ Robert Jung ARJ压缩包文件ART Xara Studio绘画文件;Canon Crayola美术文件;Clip Art文件格式;另一种光线跟踪...

图片的保存格式有几种?各有什么优点?
2、TIF,是由Aldus和Microsoft公司为桌上出版系统研制开发的一种较为通用的图像文件格式。 TIFF格式灵活易变,它又定义了四类不同的格式:TIFF-B适用于二值图像:TIFF-G适用于黑白灰度图像;TIFF-P适用于带调色板的彩色图像:TIFF-R适用于RGB真彩图像。3、GIF格式,1987年开发的图像文件格式。GIF文件...

图片的四种格式.jpg、.gif、.png、.bmp各是什么意思?
4、BMP 是(Windows 位图) Windows 位图可以用任何颜色深度(从黑白到 24 位颜色)存储单个光栅图像。Windows 位图文件格式与其他 Microsoft Windows 程序兼容。它不支持文件压缩,也不适用于 Web 页。Windows 位图文件格式的缺点超过了它的优点。为了保证照片图像的质量,请使用 PNG 、JPEG、TIFF 文件。

psd格式的文件用什么软件可以打开?
PSD格式的文件可以用Photoshop软件打开,该文件格式为Photoshop的可编辑格式。打开方法:1、首先在电脑中找到需要打开的PSD文件。\/iknow-pic.cdn.bcebos.com\/94cad1c8a786c91784c4d551c73d70cf3ac75797"target="_blank"title="点击查看大图"class="ikqb_img_alink">\/iknow-pic.cdn.bcebos.com\/94cad1...

DWG格式文件用什么软件打开?
其他支持打开DWG格式文件的软件:1、ABViewer图形查看器。ABViewer是Soft Gold 推出的 ABViewer 图形查看器适合在家庭和工作中使用,它可以查看、浏览并编辑CAD(DWG)格式文件。2、Acme CAD Converter软件。该软件可以浏览不同版本的DWG并可以将CAD图形文件批量转换为GIF、JPEG、DXF以及PDF等格式。3、Dwg...

LBL格式文件用什么软件可以打开
2、然后点击之后,如图所示,就可以看到弹出来的页面,选择找到LBL格式文件,点击打开。\/iknow-pic.cdn.bcebos.com\/8b82b9014a90f60351587ca93712b31bb151ed70"target="_blank"title="点击查看大图"class="ikqb_img_alink">\/iknow-pic.cdn.bcebos.com\/8b82b9014a90f60351587ca93712b31bb151ed70?x-...

要将C盘windows文件夹下所有的第三个字母为B的文件复制到软盘的根文件...
xcopy C:\\windows\\??b* a:\\ \/s 看下说明吧 COPY文件复制命令 1.功能:拷贝一个或多个文件到指定盘上。2.类型:内部命令 3.格式:COPY [源盘][路径]〈源文件名〉[目标盘][路径][目标文件名]4.使用说明:(1)COPY是文件对文件的方式复制数据,复制前目标盘必须已经格式化;(2)复制...

都昌县17823329972: 安卓开发中怎么将文件转换成base64字符串 -
茹邵希美: 将文件转成base64 字符串,android 手机开发的时候会用到,当然在android有转base64的方法,这里调用的是jdk的api [代码] [Java]代码 01 package com.xbl.test; 02 03 import java.io.File; 04 import java.io.FileInputStream; 05 import java.io....

都昌县17823329972: base64可以表示、存储、传输任意数据文件吗? -
茹邵希美: Convert.ToBase64String(.....)方法.此方法有重载,自己选择适当的方法使用

都昌县17823329972: 怎样将一个exe文件转换成base64编码 -
茹邵希美: 打开outlook express,写新邮件,把你的exe文件做为附件,另存为aaa.eml,用记事本打开aaa.eml,找到你的exe部分的编码即可.

都昌县17823329972: 如何将音频文件转为base64 编码 -
茹邵希美: 网上有一些在线的转换的工具的,将图片或者音频转换为base64b编码,可以直接放到css中使用的

都昌县17823329972: 如何在delphi中实现对文件进行base64编码 -
茹邵希美: delphi 中有个EncdDecd类,这个是delphi自带的base64编码类,里面提供了编码和解码函数分别是:function EncodeString(const Input: string): string; //编码 function DecodeString(const Input: string): string; //解码

都昌县17823329972: base64的用途 为什么图片要用base64转码 -
茹邵希美: 因为传输信道只支持ASCII字符,不方便传输二进制流的场合.含有非ASCII字符,容易出现编码问题的场合.所以需要用base64转化为ascii字符. Base64用于将二进制数据编码成ASCII字符 (图片、文件等都可转化为二进制数据)

都昌县17823329972: JAVA BASE64编码 -
茹邵希美: 简单,你用FileInputStream打开文件,然后传给那个Encoder就行了.他支持InputStream的输入参数的.

都昌县17823329972: 字符串怎么进行base64编码 -
茹邵希美:最简单的方法是 引用下 commons-codec jar 示例: public static void main(String[] args){System.out.println(Base64.encodeBase64String("飞天奔月".getBytes()));} 输出: 6aOe5aSp5aWU5pyI

都昌县17823329972: 读取一个文件,将其Base64编码,每76个字符加一个换行,用php程序写出代码? -
茹邵希美: $s = base64_encode(file_get_contents('./文件')); file_put_contents('./out' , preg_replace('/(.{76})/', "$1\n", $s));

都昌县17823329972: base64是一种用64个字符来表示任意二进制数据的编码方法,请写出study字符串编 -
茹邵希美: 首先二进制存储的数据格式你自己要清楚 看你要保存成CSV文件,那存储的应该是表格类的或者矩阵数据 编程自己读写吧,读就要你自己搞清楚了,写就把读出来的数据按行写入,数据间再写入一个逗号 csv文件其实就是文本文件,里面的数据以矩阵方式存储,数据用逗号隔开

本站内容来自于网友发表,不代表本站立场,仅表示其个人看法,不对其真实性、正确性、有效性作任何的担保
相关事宜请发邮件给我们
© 星空见康网