- 浏览: 285596 次
- 性别:
- 来自: 黑龙江
文章分类
- 全部博客 (151)
- 工具配置 (11)
- 前端技巧 (29)
- 分享 (4)
- action (1)
- ORM (2)
- mysql (17)
- html5 (1)
- java EE (1)
- 数据库理论 (5)
- 密码安全 (2)
- maven (7)
- java (14)
- linux (10)
- 电脑知识 (2)
- spring mvc (1)
- apache (2)
- php (2)
- 分布式 (1)
- memcache (2)
- ActiveMQ (1)
- jetty (2)
- foxmail拒信 (1)
- dos (1)
- eclipse (4)
- mybatis (2)
- tomcat (1)
- shell (0)
- Jmeter (3)
- windows (1)
- redis (6)
- StringUtils (1)
- svn (1)
- jsoup (2)
- zookeeper (3)
- log4j (3)
- git (3)
- solr (1)
- elasticsearch (1)
- 佛祖 (1)
- spring boot (2)
- openldap (0)
最新评论
-
boreas_baosj:
绑定多个事件的时候怎么传递参数呢???
jquery中的bind事件,详解,传参 -
sauzny:
usiboy 写道NIO确实可以提高Socket通讯上的效率, ...
Tomcat并发数优化的方法总结 -
usiboy:
NIO确实可以提高Socket通讯上的效率,但对于JVM的调优 ...
Tomcat并发数优化的方法总结
一、base64百科
Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,可用于在HTTP环境下传递较长的标识信息。
某人: 唉,我彻底废柴了,为何上面明明是中文,洒家却看不懂嘞,为什么?
好吧,我也不喜欢专业术语的解释。你只要知道,base64编码就是长得像下面这样子的代码:
thunder://QUFodHRwOi8vd3d3LmJhaWR1LmNvbS9pbWcvc3NsbTFfbG9nby5naWZaWg==
上面代码大家都熟悉吧,迅雷下载链接哦(咳咳,该地址很纯洁),就是base64编码后的地址,所以以后看到这种:一堆连续字母,最后有1~2个“=”的代码就是base64。
base64:URL就是URL地址是base64编码的。
例如下面这个:
<img src="data:image/gif;base64,R0lGODlhAwADAIABAL6+vv///yH5BAEAAAEALAAAAAADAAMAAAIDjA9WADs=" />
二、base64与文件数据编码
在网络中,通过HTTP传输的文件还可以通过base64对数据进行编码进行传输。就如上面的这个base64的gif格式图片。当然,可以base64编码的文件不仅仅是图片,也可以是字体文件,例如(中间有缺省):
@font-face{
font-family: forTest;
src:url(data:font/woff;charset=utf-8;base64,d09GRgABAAAAAAh4 ... RFERuENEGADl7JlY=) format('woff');
}
自然,对于background-image图片,我们也可以使用base64编码进行传输,例如:
background-image:url(data:image/gif;base64,R0lGODlhBAABAIABAMLBwfLx8SH5BAEAAAEALAAAAAAEAAEAAAICRF4AOw==);
而使用base64编码作为background-image图片就是本文要着重阐述的。
三、如何获得图片的base64编码
其实在我之前“基于HTML5的可预览多图片Ajax上传”以及“zSlide-基于CSS3/HTML5演示文档jQuery插件”实际上就与图片的base64编码的获取打过交道了。如下本地图片转换成可预览的base64编码的核心脚本:
var reader = new FileReader(), htmlImage;
reader.onload = function(e) {
htmlImage = '<img src="'+ e.target.result +'" />'; // 这里e.target.result就是base64编码
}
reader.readAsDataURL(file);
上面说的你只需要了解,实际上,目前base64编码工具不少,对于我们前端制作,下面这个本地图片 base64编码获取页面是值得推荐的:Encode Data URL By PuterJam
直接将桌面图片拖到条条里就有了响应的background-image url属性可用的base64地址了:
该转换页面的原理就是上面所说的HTML5 文件本地预览原理,具体可以自己查阅资料。
四、使用base64:URL的优缺点
个人觉得base64:URL传输图片文件的好处在于:
1.减少了HTTP请求
2.某些文件可以避免跨域的问题
3.没有图片更新要重新上传,还要清理缓存的问题
不足在于:
1.浏览器支持
使用base64编码图片作为背景图片的这种技术IE6/IE7浏览器是不支持的(IE9浏览器IE7模式下支持,这里被@前端的那点破事鄙视了 )。对于目前PC页面,兼容性问题使没有文件上传以及无需更新缓存的优点不存在了。
2.增加了CSS文件的尺寸
base64编码图片本质上是将图片的二进制大小以一些字母的形式展示,例如一个1024字节的图片,base64编码后至少1024个字符,这个大小会被完全嵌入到CSS文件中(不过幸运的是也可以被gzip了,而图片文件被gzip效果不明显)。
3.编码成本
图片完成后还需要base64编码,目前估计手工完成的多,因此,增加了一定的工作量,虽然不多
发表评论
-
js中setInterval与setTimeout用法
2014-01-17 10:01 781setTimeout 定义和用法: setTime ... -
uploadify上传文件
2013-07-16 11:15 2293发现网上很多人写的都好像是旧的方法,好像已经过时了… ... -
js 正则验证
2013-01-16 14:25 906/判断输入内容是否为空 function IsNull() ... -
js对字符串的处理,以及验证
2013-01-16 14:06 1122JS自带函数concat将两个或多个字符的文本组合起来,返回一 ... -
Jquery中bind和live的区别
2012-11-28 13:35 2962Jquery中绑定事件有三种方法:以click事件为例 ... -
(MD)正则表达式中的特殊字符
2012-11-01 14:52 1761字符 含意 \ 做为 ... -
jquery ajax的参数详解
2012-10-31 13:00 1058参数名 类型 描述 ... -
JQUERY的父,子,兄弟节点查找方法
2012-10-31 11:00 44891jQuery.parent(expr) 找父亲节点,可以传入 ... -
jquery的md5插件
2012-10-20 18:24 1121(function($){ var rotate ... -
list-style功能:设置列表项目相关内容。
2012-10-16 15:32 955list-style功能:设置列表项目相关内容。 语法 ... -
JS父页面获取子页面返回值
2012-10-11 16:47 2809父页面<html><head> ... -
对textarea的内容进行详细监听(键盘+鼠标)
2012-09-27 17:56 1158$("#textarea").bin ... -
word-wrap同break-word的区别
2012-09-23 15:09 964自动换行word-break:break-all和word-w ... -
Jquery弹出层BlockUI的用法(BlockUI是个插件)
2012-09-18 11:02 2304例子一: <head runat="serv ... -
jQuery中ajax中事件执行顺序
2012-09-18 10:51 9071.ajaxStart(全局事件) 2.beforeSend ... -
CSS2.0无图片实现圆角
2012-09-13 18:49 865CSS2.0无图片实现圆角 -
jquery中的ready和window的onload之间的“藕断丝连”
2012-09-10 03:00 826遇到了一个死循环,经高人指点,置之死地而后生~ -
textarea中的MaxLength属性在ie中失效问题
2012-09-09 17:18 1336代码解决 -
jquery弹出窗口锁屏代码
2012-09-09 17:17 1019还在改进中 -
json不能解读回车等字符引发的java与js编码和解码的问题
2012-09-09 17:16 949编码问题 乱七八糟
相关推荐
图片url转base64位,base64位的数据转换成图片,附带工具类
function Base64ToImage(const base64:string;AImage:TImage):Boolean; function Base64ToImageFile(const base64:string;AImagefile:string):Boolean; function CheckImgTypeBase64(abase64:string):string;
VB6实现图片和BASE64之间的转换,巧用XML,通用性好,可以用于将图片远程上传服务器,保存数据库,或才接收服务器图片数据后,转换成图片本地显示。
用途:根据图片文件(PNG/JPG/BMP),生成对应的Base64字符串文件。 可以选择设置,转换时的图片质量参数(Quality)。 这个小小工具,只是针对Base64字符串的浅显技术研究与实验。 用C# .NET语言编写,运行时需要...
可以把任意文件通过Base64编码为URL的形式 通常用于CSS链接图片 例如div{backgroud:url data:xxx ;} xxx代表通过该工具编码后的结果 而不需要链接到一个图片地址 这样可以减少http请求
Base64编码与图片互转
base64url 往返 安装 $ npm install base64url 使用npm安装后,您可以从JavaScript或TypeScript要求此库: JavaScript const base64url = require ( 'base64url' ) ; 打字稿: import base64url from "base...
JQ JS javascript 普通图片上传 图片格式转换 图片base64转换 jpg转base64 png转base64
lottie-web-base64 使用Base64处理Lottie-Web图像。 将data.json和图像打包在index.html中。开发npm开始建造电子包装机。 -覆盖用法demo文件夹是UI给定的文件夹,它总是有demo.html,data.json和图片(如果有图片)...
根据url和图片左上右下两点坐标裁剪图片并返回base64格式字符串,java工具类,适用于人脸识别
js加载base64图片js加载base64图片js加载base64图片js加载base64图片
任务 Base64解码 INTERNATIONAL MEDICAL SUMMIT FORUM 任务 Base64解码 任务背景 ...Base64:Python中提供了Base64编码和解码的基础模块。 编码方法:base64.b64encode(bytes),因base64编码时是对字节进行
在Excel中用VBA解码BASE64编码的图片
图片转为base64编码,base64编码保存为图片。代码内容借鉴了网上的转换类。图片转为base64编码,base64编码保存为图片。代码内容借鉴了网上的转换类。
【程序老媛出品,必属精品,亲测校正,...资源名:vb 图片转base64编码 程序源码 资源类型:程序源代码 源码说明: 基于vb编写的实现图片转base64编码程序源码 非常适合借鉴学习 适合人群:新手及有一定经验的开发人员
uniapp 生成海报图片base64转换 (微信头像贴在海报上需要base64转换)import { pathToBase64, base64ToPath } from "路径" base64ToPath(res.data.data.poster) .then(path => {}) .catch(error => { ...
在网页中把Base64字符串显示为图片很容易,但是当前台使用Thymeleaf框架时,就得绕个小弯子,直接使用html框架中的方法不行,本文详解了用Thymeleaf显示Base64字符串为图片的方法,望对大家有所帮助。
c++图片与base64互转 代码直观可用,已经测试,可直接调用,需要用到OpenCV读取图片
一个很好的Base64编-解码工具.转换很方便,支持中文,支持UTF-8,Unicode编码方式. Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,Base64要求把每三个8Bit的字节转换为四个6Bit的字节(3*8 = 4*6 = 24)...
pb10调用base64.dll,实现将图片转换成base64编码,将base64编码转换成图片 函数声明 function long GetFileEncode64(ref string filename, ref string encode64)library "base64" alias for "GetFileEncode64;...