Data URIs方式原理及优缺点

Data URIs方式

主要利用了HTMLCanvasElement.toDataURL()方法，HTMLCanvasElement.toDataURL() 方法返回一个包含图片展示的 data URI 。可以使用 type 参数其类型，默认为 PNG 格式。图片的分辨率为96dpi。 语法：

canvas.toDataURL(type, encoderOptions);

参数：

• type 可选 图片格式，默认为 image/png
• encoderOptions 可选 在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他参数会被忽略。

返回值： 包含 data URI 的DOMString。

比如：

<canvas id="canvas" width="5" height="5"></canvas>

var canvas = document.getElementById("canvas");
var dataURL = canvas.toDataURL();
console.log(dataURL);
// "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby
// blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"

Data URIs

什么是URI

统一资源标识符(Uniform Resource Identifier，或URI)是一个用于标识某一互联网资源名称的字符串。Web上可用的每种资源 -HTML文档、图像、视频片段、程序等，都由一个统一资源标识符(Uniform Resource Identifier, 简称"URI")进行标识。

而URL是uniform resource locator，统一资源定位器，它是一种具体的URI，即URL可以用来标识一个资源，而且还指明了如何locate这个资源。

怎么用

　Data URIs的数据格式很简单，通过RFC 2397的定义，一般格式是：

　　data:[mime type][;charset=][;base64],

　　说明：

• data - 指代URI协议
• mime type - 代表数据类型，如png图片则为image/png，若不说明，默认为text/plain(上面的默认值为那个函数的默认值，这里是这种数据格式的默认值)
• charset - 如果不使用base64，则使用charset指定的字符类
• encoded data - 对应的编码信息

优缺点

优点： 1.减少HTTP请求数，没有了TCP连接消耗和同一域名下浏览器的并发数限制，这里说的方式是下图这种将编码后的图片放到标签的url或者src中。

网页上的图片资源如果采用http形式的url的话都会额外发送一次请求，网页发送的http请求次数越多，会造成页面加载速度越慢。而采用Base64格式的编码，将图片转化为字符串后，图片文件会随着html元素一并加载，这样就可以减少http请求的次数，对于网页优化是一种比较好的手段。

2.对于小文件会降低带宽。虽然编码后数据量会增加，但是却减少了http头，当http头的数据量大于文件编码的增量，那么就会降低带宽。 3.采用Base64编码的图片是随着页面一起加载的，不会造成跨域请求的问题，也不会造成清理图片缓存的问题。

缺点： 1.无法被重复利用，同一个文档应用多次同一个内容，则需要重复多次，数据量大量增加，增加了下载时间。 2.不支持数据压缩，base64编码大小会增加1/3左右，而urlencode后数据量会增加更多。 3.当我们将一个只有几KB的图片转化为Base64格式编码，生成的字符串往往会大于几KB，如果将其写在一个css文件中，这样一个css文件的大小会剧增，造成代码可读性差不说，还会造成请求传输的数据量递增。 4.如果我们将Base64编码的图片存入数据库中，会造成数据库数据量的增大，这样的效果还不如将图片存至图片服务器，而只在数据库中存入url字段。 5.不利于安全软件的过滤，同时也存在一定的安全隐患。