jsp页面上怎么用javascript获取base64编码的图片的大小如图,用js怎么获取这种格式图片的大小?

JavaScript012

jsp页面上怎么用javascript获取base64编码的图片的大小如图,用js怎么获取这种格式图片的大小?,第1张

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/htmlbase64,base64编码的HTML代码

data:text/css,CSS代码

data:text/cssbase64,base64编码的CSS代码

data:text/javascript,Javascript代码

data:text/javascriptbase64,base64编码的Javascript代码

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

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

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

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

base64简单地说,它把一些 8-bit 数据翻译成标准 ASCII 字符,网上有很多免费的base64 编码和解码的工具,在PHP中可以用函数base64_encode() 进行编码,如echo base64_encode(file_get_contents(‘images/log.gif”'))

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

举个图片的例子:

网页中一张图片可以这样显示:

代码如下:

<img src=“jwzzsw.com/images/log.gif”/>

也可以这样显示:

代码如下:

<img src=“data:image/gifbase64,R0lGODlhAgACAIAAAP///wAAACwAAAAAAgACAAACAoRRADs=”/>

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

需要准备的材料分别有:电脑、html编辑器、浏览器。

1、首先,打开html编辑器,新建html文件,例如:index.html。

2、在index.html中的<script>标签,输入js代码:$('body').append('<img src="https://www.baidu.com/img/bd_logo1.png" />')。

3、浏览器运行index.html页面,此时图片被js成功显示到页面上。