不管如何,图片的下载始终都要向服务器发出请求,要是图片的下载不用向服务器发出请求,而可以随着 HTML 的下载同时下载到本地那就太好了。而目前,浏览器已经支持了该特性,我们可以将图片数据编码成 BASE64 的字符串,使用该字符串代替图像地址。假设用 S代表这个 BASE64 字符串,那么就可以使用 <img src="data:image/png;base64,S"> 来显示这个图像。可以看出,图像的数据包含在了 HTML 代码里,无需再次访问服务器。那么图像要如何编码成 BASE64 字符串呢?可以使用 在线的工具---“Base64 Online”,这个工具可以上传图片将图片转换为 BASE64 字符串。当然,如果读者有兴趣,完全可以自己实现一个 BASE64 编码工具,比如使用 Java 开发,它的代码就如清单 7 所示。
public static String getPicBASE64(String picPath) { String content = null; try { FileInputStream fis = new FileInputStream(picPath); byte[] bytes = new byte[fis.available()]; fis.read(bytes); content = new sun.misc.BASE64Encoder().encode(bytes); // 具体的编码方法 fis.close(); } catch (Exception e) { e.printStackTrace(); } return content; }
本文编码了一个图像,并且将编码获得的 BASE64 字符串,写到了 HTML 之中,如下清单 8 所示。
<html> <body> <img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAeQAAAB8BAMAAABKwt5QAAAAA3NCSVQICAjb4U/gAAAAGFBMVEX/ ……(省略了大部分编码)… BJRU5ErkJggg=="> </body> </html>
由于图片数据包含在了 BASE64 字符串中,因此无需向服务器请求图像数据,结果显示如下图所示。
然而这种策略并不能滥用,它适用的情况是浏览器连接服务器的时间 > 图片下载时间,也就是发起连接的代价要大于图片下载,那么这个时候将图片编码为 BASE64 字符串,就可以避免连接的建立,提高效率。如果图片较大的话,使用 BASE64 编码虽然可以避免连接建立,但是相对于图像下载,请求的建立只占很小的比例,如果用 BASE64,对于动态网页来说图像缓存就会失效(静态网页可以缓存),而且 BASE64 字符串的总大小要大于纯图片的大小,这样一算就非常不合适了。因此,如果你的页面已经静态化,图像又不是非常大,可以尝试 BASE64 编码,客户端会将网页内容和图片的 BASE64 编码一起缓存;而如果你的页面是动态页面,图像还较大,每次都要下载 BASE64 字符串,那么就不能用 BASE64 编码图像,而正常引用图像,从而使用到浏览器的图像缓存,提高下载速度。从现实我们接触的角度看,如一些在线 HTML 编辑器,里面的小图标,如笑脸等,都使用到了 BASE64 编码,因为它们非常小,数量多,BASE64 可以帮助网页减少图标的请求数,提高效率。
原创文章@java教程网 转载请标明出处
java教程网编辑发布:希望本系列的文章对你的个人成长和发展有帮助。
从java新手入门,开发工具到 Java进阶,高级编程,java教程网几乎囊括了java编程的所有方面的资料。
相关推荐
ASP实例开发源码—图片base64编码互转工具 asp版.zipASP实例开发源码—图片base64编码互转工具 asp版.zipASP实例开发源码—图片base64编码互转工具 asp版.zip
2) 修复 BASE64编码解码,个别情况下不会选择AVX2模式的问题(C/C++的bool类型是单字节,易的逻辑型是4字节,易的逻辑型为真时 转为字节集可能是{0,0,1,0},导致单字节判断 时灵时不灵)。1.4更新(2019.6.5)。 1) 添加...
image-tools图像转换工具,可用于如下环境:uni-app、微信小程序、5+APP、浏览器(需允许跨域),图像和base64的转换
我在网上找了半天的java、js的base64编码解码结果没有,只好自己写了,js一个文件,java一个文件,调用里面是使用方法
java-Base64编码两个jar包,两个都可以用。
Laravel开发-base64-validation base64编码文件的laravel验证器
lottie-web-base64 使用Base64处理Lottie-Web图像。 将data.json和图像打包在index.html中。开发npm开始建造电子包装机。 -覆盖用法demo文件夹是UI给定的文件夹,它总是有demo.html,data.json和图片(如果有图片)...
android 开发中有时会需要用到base64加解密,其实base64并不算是一种加密的算法,只是一种基于64个可打印字符来表示二进制数据的表示方法。 google在android.util下提供了一个Base64工具类,可以很方便的用它encode...
实现BASE64编码和解码程序, 在类中实现如下函数并运行测试正确。 BASE64编码算法请在网上查询。 public String encode(byte[] data) { } public byte[] decode(String b) { }
教你用windows系统自带功能编码/解码 十六进制/Base64 -- 解码十六进制编码的文件 -- 解码 Base64 编码的文件 -- 将文件编码为 Base64 doc cmd 下 解码 Base64
提供一种Base64编码,并输出UTF-8格式的BASE64编码方式。本程序在微信小程序开发工具中已经测试通过。 Base64代码: [javascript] view plain copy print? (function(){ var BASE64_MAPPING = [ 'A','B','C','D',...
基于Linux操作系统下 图像与BASE64编码互转,图像BASE64数据编码的加/解密
libb64是实现base64编码解码的开源库,还提供了C++封装,用起来挺方便
用Java编写的Base64编码技术,可以把密文编码成为Base64编码,Base64编码技术广泛用于编码密文和电子邮件。
可以实现将文件转换为Base64编码。可以实现将文件转换为Base64编码。
labview 图片缩放 base64编码base64解码
java 把PDF转换成BASE64,java 把PDF转换成BASE64,java 把PDF转换BASE64,java 把PDF转换成BASE64java 把PDF转换成BASE64
需要一个二进制与BASE64相互转换的函数,从网上找...示例中提供二进制与16进制字符串转换函数ConvertHexStrToBin与ConvertBinToHexStr,二进制与BASE64编码转换函数Base64Encode与Base64Decode,在VC6下编译通过可用。
Java基础加密组件--BASE64加密 使用方法: //加密 String a = EdptByBase64.encryptBASE64("/**/;pas58"); System.out.println(a); //还原 System.out.println(EdptByBase64.decryptBASE64(a)); 具体源码请参见: ...
Laravel开发-laravel-base64-validator Laravel Base64验证包