blob canvas img dataUrl的互相转换和用处

blob:代表了一段二进制数据

初始化：var blob = new Blob(array,option)//其中array里面可以包含任意类型对象，option指数据类型如array是['<h></h>'],我们可以指定option为{'type':'text/xml'}

衍生品：因为作为二进制需要与外界进行交互，所以分别退出三个衍生品

1:File对象 二进制与本地文件的交互

2:FileReader对象 二进制与本地内存的交互

3:URL对象 二进制与url的交互

　　FIle对象：

　　　　通过html的file控件，用户选择好文件后，我们通过file对象的file[0]可以拿到用户选择的文件（如果用户选择多个文件，可以遍历取得），拿到file文件后其实以一个blob类型的对象，我们可以使用blob的slice进行文件切割或其他处理

　　FileReader:

　　　　FileReader对象接收File对象或Blob对象作为参数，用于读取文件的实际内容，即把文件内容读入内存。对于不同类型的文件，FileReader使用不同的方法读取。

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

　　　　然后我们可以在onload方法里面拿到解析后的内容　　

　　URL对象：

　　　　URL对象用于生成指向File对象或Blob对象的URL：var objecturl = window.URL.createObjectURL(blob);

canvar:　提供了一种js自己创建图形的能力　

dataUrl:一种图片数据的编码显示

img:图片标签，展示图片，在这里泛指一切显示控件 如vedio span等

dataUrl转blob：

　　用途：拿到一个图片后，通过某种方式转换为dataUrl类型，最终转换为blob类型 上传到服务器

　　用法：第一种可以将图片放入canvas后利用canvas的toblob方法，或者放入canvas后，利用canvas的todataurl方法获取dataurl后 将dataurl转blob：拿到dataurl后获取逗号后面的编码数据利用window.atob将编码解码，将解码后的字符串使用charcodeat获取每一个字符串的unicode字符，然后存入Uint8Array数组，利用blob初始化把Uint8Array数组转换为blob

blob转dataUrl：

　　用途：拿到blob对象后，希望展示这个数据

　　用法：使用window.URL.createObjectURL(blob)拿到dataUrl对象，然后进行展示

canvan转blob：canvas 最新的方法 toblob

canvas转dataurl：canvas的实例方法 todataurl

blob转canvas：blob转换为dataurl对象后 新疆一个图片用来显示dataurl数据，然后将图片放入canvas中

dataurl转canvas：dataurl先变成图片再放入canvas

img转canvas：canvas的drawImage方法支持将img放入canvas

canvas转img：利用canvas的todataurl方法获取图片数据后，新建图片控件展示图片