- 浏览: 291988 次
- 性别:
- 来自: 黑龙江
文章分类
- 全部博客 (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 828setTimeout 定义和用法: setTime ... -
uploadify上传文件
2013-07-16 11:15 2349发现网上很多人写的都好像是旧的方法,好像已经过时了… ... -
js 正则验证
2013-01-16 14:25 950/判断输入内容是否为空 function IsNull() ... -
js对字符串的处理,以及验证
2013-01-16 14:06 1168JS自带函数concat将两个或多个字符的文本组合起来,返回一 ... -
Jquery中bind和live的区别
2012-11-28 13:35 3006Jquery中绑定事件有三种方法:以click事件为例 ... -
(MD)正则表达式中的特殊字符
2012-11-01 14:52 1835字符 含意 \ 做为 ... -
jquery ajax的参数详解
2012-10-31 13:00 1100参数名 类型 描述 ... -
JQUERY的父,子,兄弟节点查找方法
2012-10-31 11:00 44942jQuery.parent(expr) 找父亲节点,可以传入 ... -
jquery的md5插件
2012-10-20 18:24 1153(function($){ var rotate ... -
list-style功能:设置列表项目相关内容。
2012-10-16 15:32 992list-style功能:设置列表项目相关内容。 语法 ... -
JS父页面获取子页面返回值
2012-10-11 16:47 2860父页面<html><head> ... -
对textarea的内容进行详细监听(键盘+鼠标)
2012-09-27 17:56 1213$("#textarea").bin ... -
word-wrap同break-word的区别
2012-09-23 15:09 998自动换行word-break:break-all和word-w ... -
Jquery弹出层BlockUI的用法(BlockUI是个插件)
2012-09-18 11:02 2344例子一: <head runat="serv ... -
jQuery中ajax中事件执行顺序
2012-09-18 10:51 9451.ajaxStart(全局事件) 2.beforeSend ... -
CSS2.0无图片实现圆角
2012-09-13 18:49 926CSS2.0无图片实现圆角 -
jquery中的ready和window的onload之间的“藕断丝连”
2012-09-10 03:00 856遇到了一个死循环,经高人指点,置之死地而后生~ -
textarea中的MaxLength属性在ie中失效问题
2012-09-09 17:18 1392代码解决 -
jquery弹出窗口锁屏代码
2012-09-09 17:17 1061还在改进中 -
json不能解读回车等字符引发的java与js编码和解码的问题
2012-09-09 17:16 1040编码问题 乱七八糟
相关推荐
- 内联图片:通过在HTML中直接插入Base64编码的图片,可以减少HTTP请求,提高页面加载速度,特别是对于小图标或者简单的背景图。 - JSON数据交换:Base64编码允许在JSON对象中直接包含图像数据,无需额外的服务器...
【Web系统性能优化】 Web系统性能优化是提升用户体验和网站效率的关键环节,尤其在WAP站点建设中,性能优化显得尤为重要。通过对客户端浏览器访问服务器全过程的深入理解,我们可以找到优化的切入点。 首先,理解...
在Web开发过程中,图片作为重要的组成部分之一,在提升用户体验的同时也增加了页面加载时间。因此,对图片进行有效的压缩处理不仅可以减少服务器存储空间的需求,还能提高网页加载速度,从而优化用户体验。 #### 二...
在实际应用中,还可以考虑其他因素,如性能优化(如使用Web Workers在浏览器端预处理图片)、错误处理(如处理上传失败或图片格式不支持的情况)以及用户体验(如实时预览缩略图)。在开发过程中,CutImage这样的...
- **编码问题**:如果图片是通过Base64编码存储在数据库中,确保解码和显示过程正确。 - **缓存问题**:清空浏览器缓存或者强制刷新页面查看是否解决问题。 为提高用户体验,还可以考虑以下优化策略: - **使用CDN...
开发这样一个系统,通常会设计一套RESTful API接口,比如一个POST接口接收轨迹数据,返回生成的签名图片URL或Base64编码的图像数据。前端通过Ajax调用这个接口,实现签名的动态生成和保存。 7. **前端用户体验**:...
- **页面性能**:优化代码结构,减少服务器负载,提高页面加载速度。 #### 三、文件规范 - **文件分类存放**:HTML、CSS、JavaScript和图片文件分别按照系统开发规范约定的目录存放。 - **命名规则**: - HTML文件...
- 将处理后的 `canvas` 图像转换为新的 `base64` 编码,然后设置为一个 `img` 元素的 `src` 属性,这样用户就能看到马赛克后的图片了。 5. **使用组件**: 在其他 `vue` 组件或页面中,只需引入并使用 `Mosaic` ...
4. **性能优化**:对于大型DOM树,截图可能较慢,可考虑分块截图或使用懒加载策略。 ### 五、应用场景 - **自定义截图**:用户可以选择感兴趣的页面部分进行截图分享。 - **数据可视化**:将图表、地图等动态内容...
在实际开发中,了解SVG和CSS之间的转换技巧对于优化Web应用的性能和用户体验至关重要。开发者应该熟悉如何在两者之间灵活切换,并利用自动化工具来提高效率。同时,理解文件压缩原理和方法,如Base64编码和CSS ...
而背景图片通常使用`background-image`属性,可以设置为URL路径,也可以引用数据URI,将图片编码成Base64字符串内嵌在CSS中,以减少HTTP请求。 此外,`WebFlatButton`可能还支持自定义的鼠标悬停、点击等状态下的...
3. **图片处理:**可以加载并绘制网页中的图片,包括相对和绝对URL。 4. **异步加载:**对于延迟加载的图片,html2canvas提供了一种异步处理机制。 5. **CSS3兼容:**支持如渐变、变换、阴影等CSS3特性。 6. **跨域...
【WEB前端开发规范文档+CSS...8. **性能优化**:减少不必要的选择器,合并重复样式,使用CSS Sprite优化图像加载。 通过遵循这些规范,前端开发可以提高代码质量,简化维护,提升团队协作效率,并确保项目的长远发展。
- **资源引用简化**:通过设置`<base>`标签,可以简化页面内部资源(如图片、CSS、JS文件等)的引用路径,无需每次都写出完整的URL。 - **跨域资源共享**:在处理跨域请求时,可以通过修改基本路径来控制资源的来源...
5. **内联URL base64编码**:如果CSS文件中有背景图片等内联URL,压缩工具可能会将其转换为base64编码,嵌入到CSS文件中,减少HTTP请求。 【实际应用】 在实际开发中,开发者通常会在构建过程中自动运行CSS压缩工具...
然后,利用Canvas的toDataURL方法,将Canvas的内容转换为data URL形式的图片,这通常是一个base64编码的PNG或JPEG图像。通过这种方式,HTML2canvas能够生成与用户在浏览器中看到的网页内容一致的图像。 **jspdf** ...
2. **图片处理**:可以加载和渲染图片,包括网络和base64编码的图片。 3. **透明度处理**:支持透明度和混合模式。 4. **布局计算**:处理浮动元素、相对定位和绝对定位。 5. **Web字体支持**:可以加载网络字体并...
7. **性能优化**:对于大型项目,考虑到Canvas的绘图操作可能会对性能产生影响,你可以考虑使用Web Worker来异步生成QR码,以避免阻塞主线程。 通过掌握这些知识点,你就可以灵活地在你的网站或应用中集成qrious,...
- **性能优化**:对于较大的图片文件,直接预览可能会导致页面加载缓慢或资源消耗过多。因此,可以通过压缩图片或限制文件大小等手段进行优化。 #### .NET 后端逻辑 在.NET平台下,处理文件上传通常涉及以下几个...