Blob和base64

# [https://zh.wikipedia.org/wiki/Base64]

base64

基于64个可打印字符来表示二进制数据的表示方法。
Base64可以用来将binary的字节序列数据编码成ASCII字符序列构成的文本。

由于 {\displaystyle 2^{6}=64} {\displaystyle 2^{6}=64}，所以每6个比特为一个单元，对应某个可打印字符。3个字节有24个比特，对应于4个Base64单元，即3个字节可由4个可打印字符来表示。它可用来作为电子邮件的传输编码。

在Base64中的可打印字符包括字母A-Z、a-z、数字0-9，这样共有62个字符，此外两个可打印符号在不同的系统中而不同。等号=用来作为后缀用途。
使用时，在传输编码方式中指定Base64。使用的字符包括大小写拉丁字母各26个、数字10个、加号+和斜杠/，共64个字符，

Base64常用于在通常处理文本数据的场合，表示、传输、存储一些二进制数据，包括MIME的电子邮件及XML的一些复杂数据。

编码后的数据比原始数据略长，为原来的4/3。在电子邮件中，根据RFC 822规定，每76个字符，还需要加上一个回车换行。

Base64编码方式：

# 文件和二进制数据的操作
[文件和二进制数据的操作]

历史上，JavaScript无法处理二进制数据。如果一定要处理的话，只能使用charCodeAt()方法，一个个字节地从文字编码转成二进制数据，还有一种办法是将 二进制数据转成Base64编码，再进行处理。这两种方法不仅速度慢，而且容易出错。ECMAScript 5引入了Blob对象，允许直接操作二进制数据。

Blob对象是一个代表二进制数据的基本对象，在它的基础上，又衍生出一系列相关的API，用来操作文件。

File对象：负责处理那些以文件形式存在的二进制数据，也就是操作本地文件；
FileList对象：File对象的网页表单接口；
FileReader对象：负责将二进制数据读入内存内容；
URL对象：用于对二进制数据生成URL。

blob对象

Blob（Binary Large Object）对象代表了一段二进制数据，提供了一系列操作接口。其他操作二进制数据的API（比如File对象），都是建立在Blob对象基础上的，继承了它的属性和方法。

生成Blob对象有两种方法：一种是使用Blob构造函数，另一种是对现有的Blob对象使用slice方法切出一部分。

## 2 FileList对象
## 3 File API
## 4 FileReader API
对于不同类型的文件，FileReader提供不同的方法读取文件。

readAsBinaryString(Blob|File)：返回二进制字符串，该字符串每个字节包含一个0到255之间的整数。
readAsText(Blob|File, opt_encoding)：返回文本字符串。默认情况下，文本编码格式是’UTF-8’，可以通过可选的格式参数，指定其他编码格式的文本。
readAsDataURL(Blob|File)：返回一个基于Base64编码的data-uri对象。
readAsArrayBuffer(Blob|File)：返回一个ArrayBuffer对象。

onload事件的回调函数接受一个事件对象，该对象的target.result就是文件的内容。

## 5 综合实例：显示用户选取的本地图片

URL对象

URL对象用于生成指向File对象或Blob对象的URL。

var objecturl = window.URL.createObjectURL(blob);

会对二进制数据生成一个URL，类似于“blob:http%3A//test.com/666e6730-f45c-47c1-8012-ccc706f17191”。这个URL可以放置于任何通常可以放置URL的地方，比如img标签的src属性。需要注意的是，即使是同样的二进制数据，每调用一次URL.createObjectURL方法，就会得到一个不一样的URL。

这个URL的存在时间，等同于网页的存在时间，一旦网页刷新或卸载，这个URL就失效。除此之外，也可以手动调用URL.revokeObjectURL方法，使URL失效。

# [php – 什么是blob url,为什么使用它？]

blob url

Blob网址只能由浏览器在内部生成。 URL.createObjectURL()将创建对Blob或File对象的特殊引用，稍后可以使用URL.revokeObjectURL()释放它。这些URL只能在浏览器的单个实例中和在同一会话(即页面/文档的生命周期)中本地使用。

Blob URL /对象URL是一种伪协议，允许Blob和File对象用作图像，二进制数据的下载链接等URL源。

Data URL和图片

# Data URL和图片

1	<img src="data:image/gif;base64,R0lGODlhMwAxAIAAAAAAAPUUHkNJxhLZfEJNvol06tzwrgdLbXsFZYmSMPnHLB+zNJFbq15+SOf50M7vMZofJy8zJys2UxsCT3kO229LH1tXAAAOw==">

## 2 为什么Data URL是个好东西
## 3 在CSS里使用Data URL
## 4 将图片转换成Data URL格式的方法

文件上传和下载

见[js文件操作(009)]

# [MediaSource的使用以及封装MP4转加载Blob的插件]

MediaSource/mp4转blob

API allowing media data to be accessed from HTML video and audio elements.

下载blob 视频

# 当url是blob url时，html5下载属性不起作用应该怎么解决？
注意：使用MediaStream对象作为此方法的输入正在被弃用。正在讨论是否应该彻底删除它。因此，应该尽量避免在MediaStream中使用此方法，而应该使用HTMLMediaElement.srcObject（）。

function downloadvideo(video){
    // const url = URL.createObjectURL(video.captureStream());// # 1 not ok

    //adding a dom element and fetching it in HTMLMediaElement.
    var mediaStream = video.captureStream();
    HTMLMediaElement.srcObject = mediaStream;
    var url = HTMLMediaElement.currentSrc;


    const aelem = document.createElement('a');
    document.body.appendChild(aelem);
    aelem.setAttribute("href",url);
    aelem.setAttribute("download","video.mp4");
    aelem.click();
    //URL.revokeObjectURL(url);
}

其它：
Convert blob URL to normal URL

其它：
HTML5 Video Blob 初探