图片的DataURL技术
DataURL基本原理
在网页中我们通常用下面的方式来引用一张图片,这样当我们请求网页的时候,浏览器也会想服务器发起一个请求,去请求这张图片。
<img src='images/test.jpg'>
现在有一种另一种方式:
<img src='data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAwAAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFzByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSpa/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJlZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uisF81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PHhhx4dbgYKAAA7'>
这种方式叫做DataURL技术,它是将图片对应的二进制代码,通过base64转换成可以打印的字母数字的形式。
这种方式需要有要求src具有一定的格式:
data:图片类型;base64,base64转换成的数据
图片类型可以为:images/gif,images/jpg,images/png等。
DataURL的优缺点
优点:
- 当图片很小时,但是占用一个HTTP请求显得太浪费时,可以用这个技术。
- 当图片是服务器端生成,并且每个用户都不一致的时候,例如验证码,有的网站的头像也可以用这种技术。
缺点:
- base64转换过后的图片会比原来的图片大1/3
- DataURL形式的图片不会被浏览器所缓存。
DataURL的使用
可以直接在html中以图片src的形式引用
<img src='data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAwAAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFzByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSpa/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJlZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uisF81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PHhhx4dbgYKAAA7'>
可以在CSS样式中以url的形式引用:
background:url("data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAwAAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFzByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSpa/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJlZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uisF81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PHhhx4dbgYKAAA7");
关于base64编码的知识,可以参考阮一峰老师的这篇文章:Base64笔记
图片的DataURL技术的更多相关文章
- CSS3图片翻转动画技术详解
CSS动画非常的有趣:这种技术的美就在于,通过使用很多简单的属性,你能创建出漂亮的消隐效果.其中代表性的一种就是CSS图片翻转效果,能让你看到一张卡片的正反两面上的内容.本文就是要用最简单的方法向大家 ...
- JAVA的图片文字识别技术
从2013年的记录看,JAVA中图片文字识别技术大部分采用ORC的tesseract的软件功能,后来渐渐开放了java-api调用接口. 图片文字识别技术,还是采用训练的方法.并未从根本上解决图片与文 ...
- HTML5笔记:跨域通讯、多线程、本地存储和多图片上传技术
最近做项目在前端我使用了很多新技术,这些技术有bootstrap.angularjs,不过最让我兴奋的还是使用了HTML5的技术,今天我想总结一些HTML5的技术,好记性不如烂笔头,写写文章可以很好的 ...
- 用DIV+CSS切割多背景合并图片 CSS Sprites 技术
很久之前就在互联网网站和一些js插件中见过这种技术的应用,当时觉得很麻烦,就没有用,也没有去深究. 近段时间一直在做前台的一些东西,涉及到很多div+css的问题.这个东东我又碰到了,所以我花了点时间 ...
- 认知服务调用如何使用图片的DataURL
说明: Data URL给了我们一种很巧妙的将图片"嵌入"到HTML中的方法.跟传统的用img标记将服务器上的图片引用到页面中的方式不一样,在Data URL协议中,图片被转换成b ...
- CSS图片翻转动画技术详解
因为不断有人问我,现在我补充一下:IE是支持这种技术的!尽管会很麻烦.需要做的是旋转front和back元素,而不是旋转整个容器元素.如果你使用的是最新版的IE,可以忽略这一节.IE10+是支持的,I ...
- DuKBitmapImages 图片压缩处理技术
Android图片压缩上传系列 *压缩中的问题: --图片压缩上如果存在问题,势必造成消耗大量的流量,下载图片的速度慢等影响产品性能,那么如何解决?请看下面: 压缩图片一共多少张?一起压缩?分开压缩? ...
- js canvas获取图片base64 dataUrl
function getImgBase64(path, callback) { var img = new Image(); img.src = path; //图片加载完成后触发 img.onloa ...
- CEF JS实现获取剪贴板图片的DataURL
转载:https://www.deanhan.cn/js-paste-upload.html 转载:https://segmentfault.com/a/1190000002915597 转载:htt ...
随机推荐
- C# 利用SQLite对.DB和.logdb加密和解密和SQLite创建数据库
1.最近研究了下利用SQLite为db文件简单的加密和解密 private static SQLiteConnection GetConnection() { SQLiteConnection con ...
- extjs 学习小窍门
一.从form中获取field的三个方法: 1.Ext.getCmp('id'); 2.FormPanel.getForm().findField('id/name'); 3.Ext.get('id/ ...
- (最重要)学了这么久的编程,你知道byte吗?
在c#中,Byte b=12; 上面是合法的,因为Byte是一个字节.他的范围是0-255. 如果是 Byte b=4096;这是错的 ,必须加上强制类型转换. 这个小问题,虽然很小但是值得注意.
- Repeater的Item项绑定DropDownList
前台页面: <asp:Repeater ID="rptJgtList" runat="server" OnItemDataBound="rptJ ...
- curl 模拟请求get/post
$url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=wx24a0ef ...
- linux 报错 bash ‘/bin/sh: Syntax error: “(” unexpected
今天用make 编译 蹦到 bash ‘/bin/sh: Syntax error: “(” unexpected 和 /bin/sh: [[: not found 这种莫名奇妙的错误 原因是是lin ...
- Lucene热词统计
1.建立搜索表 ID KeyWords DT 搜索一次保存一次,id才用guid提高效率 /// <summary> /// 搜索数据 /// </summary> /// & ...
- 手机sdk 开发
题记:很多做游戏开发的人,估计都或多或少地接过渠道SDK,什么UC,当乐,91,小米,360......据统计国内市场当前不下于100家渠道,还包括一些没有SDK的小渠道.每个渠道SDK接入的方法呢, ...
- socket网络编程
一.客户端/服务器架构 C/S架构,包括 1.硬件C/S架构(打印机) 2.软件C/S架构(Web服务) 最常用的软件服务器就是Web服务器,一台机器里放了一些网页或Web应用程序,然后启动服务,这样 ...
- Arnold AtArray API Test
#include <ai.h> #include <iostream> #include <stdio.h> #include <vector> #in ...