JS DataURL 整理(二) DataURL 和图片
一、Data URL 和图片
Data URL给了我们一种很巧妙的将图片“嵌入”到HTML中的方法。跟传统的用img标记将服务器上的图片引用到页面中的方式不一样，在Data URL协议中，图片被转换成base64编码的字符串形式，并存储在URL中，冠以mime-type。本文中，我将介绍如何巧妙的使用Data URL优化网站加载速度和执行效率。
1. Data URL基本原理
图片在网页中的使用方法通常是下面这种利用img标记的形式：
<img src="images/myimage.gif ">
这种方式中，img标记的src属性指定了一个远程服务器上的资源。当网页加载到浏览器中时，浏览器会针对每个外部资源都向服务器发送一次拉取资源请求，占用网络资源。大多数的浏览器都有一个并发请求数不能超过4个的限制。这意味着，如果一个网页里嵌入了过多的外部资源，这些请求会导致整个页面的加载延迟。而使用Data URL技术，图片数据以base64字符串格式嵌入到了页面中，与HTML成为一体，它的形式如下：
<img src="data:image/gif;base64,R0lGODlhMwAxAIAAAAAAAP///
yH5BAAAAAAALAAAAAAzADEAAAK8jI+pBr0PowytzotTtbm/DTqQ6C3hGX
ElcraA9jIr66ozVpM3nseUvYP1UEHF0FUUHkNJxhLZfEJNvol06tzwrgd
LbXsFZYmSMPnHLB+zNJFbq15+SOf50+6rG7lKOjwV1ibGdhHYRVYVJ9Wn
k2HWtLdIWMSH9lfyODZoZTb4xdnpxQSEF9oyOWIqp6gaI9pI1Qo7BijbF
ZkoaAtEeiiLeKn72xM7vMZofJy8zJys2UxsCT3kO229LH1tXAAAOw==">
从上面的base64字符串中你看不出任何跟图片相关的东西，但下面，我们将传统的img写法和现在的Data URL用法左右对比显示，你就能看出它们是完全一样的效果。但实际上它们是不一样的，它们一个是引用了外部资源，一个是使用了Data URL。
2.Data URL 的优势和劣势
优势：
- 当访问外部资源很麻烦或受限时
- 当图片是在服务器端用程序动态生成，每个访问用户显示的都不同时。
- 当图片的体积太小，占用一个HTTP会话不是很值得时。
- 可以减少网络请求。
- 字符串编码方便传输存储。
劣势：
- Base64编码的数据体积通常是原数据的体积4/3，也就是Data URL形式的图片会比二进制格式的图片体积大1/3。
- Data URL形式的图片不会被浏览器缓存，这意味着每次访问这样页面时都被下载一次。这是一个使用效率方面的问题——尤其当这个图片被整个网站大量使用的时候。
- 不能在客户端进行缓存。（如图片，只能通过css文件进行背景图片缓存）
- 渲染时需要base64解码，需要消耗cpu资源。
3.Css 中使用Data URL
.striped_box { width: 100px; height: 100px; background-image: url("data:image/gif;base64,R0lGODlhAwADAIAAAP///8zMzCH5BAAAAAAALAAAAAADAAMAAAIEBHIJBQA7"); border: 1px solid gray; padding: 10px; }
二、JS里DataURL、File、Blob及canvas对象间互相转换的方法函数
1》：canvas转换为dataURL :
var canvas = document.createElement("canvas"); var imgsrc = canvas.toDataURL('image/jpeg',0.8);//第二个参数指图片质量
2》：file/Blob对象转换为dataURL:
file对象其实也是blob对象，所以两者转换为dataURL的方法一样：
function readBlobAsDataURL(blob, callback) { var a = new FileReader(); a.onload = function(e) {callback(e.target.result);}; a.readAsDataURL(blob); } //example: readBlobAsDataURL(blob, function (dataurl){ console.log(dataurl); }); readBlobAsDataURL(file, function (dataurl){ console.log(dataurl); });
3》：dataURL转换为Blob对象、dataURL转换为File对象
function dataURLtoBlob(dataurl) { var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while(n--){ u8arr[n] = bstr.charCodeAt(n); } return new Blob([u8arr], {type:mime}); } function dataURLtoFile(dataurl, filename) { var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while(n--){ u8arr[n] = bstr.charCodeAt(n); } return new File([u8arr], filename, {type:mime}); } //test: var blob = dataURLtoBlob('data:text/plain;base64,YWFhYWFhYQ=='); var file = dataURLtoFile('data:text/plain;base64,YWFhYWFhYQ==', 'test.txt');
4》：dataURL图片数据绘制到canvas：
var img = new Image(); img.onload = function(){ canvas.drawImage(img); }; img.src = dataurl;
5》：File,Blob的图片文件数据绘制到canvas:
readBlobAsDataURL(file, function (dataurl){ var img = new Image(); img.onload = function(){ canvas.drawImage(img); }; img.src = dataurl; });
更多：
