blob pb 转二进制_从图片裁剪来聊聊前端二进制

写在最前面(不看也不会少一个亿)

最开始的一个小需求

前两天项目中有个小需求：前端下载后台小哥返回的二进制流文件。

起初接到这个需求时，我感觉这很简单啊(虽然我不会，但可以百度啊，，，，)

然后就写出了如下的代码：

let blob = new Blob([res.data]);
let fileName = `Cosen.csv`;
if (window.navigator.msSaveOrOpenBlob) {
     
  navigator.msSaveBlob(blob, fileName);
} else {
     
  let link = document.createElement("a");
  let evt = document.createEvent("HTMLEvents");
  evt.initEvent("click", false, false);
  link.href = URL.createObjectURL(blob);
  link.download = fileName;
  link.style.display = "none";
  document.body.appendChild(link);
  link.click();
  window.URL.revokeObjectURL(link.href);
}

这一段代码，我大概强行解释一下：

首先判断window.navigator.msSaveOrOpenBlob是为了兼容IE(谁要兼容这 xxIE！！)

然后非IE的通过URL.createObjectURL()将Blob(Blob是啥？不知道？没关系，我下面会具体装逼讲解的)构建为一个object URL对象、指定文件名&文件类型、创建a链接模拟点击实现下载，最后通过URL.revokeObjectURL释放创建的对象。

功能虽然实现了，但其实我是似懂非懂的～

紧接着 一个不那么简单的需求

没过几天，产品又给我提了一个需求：图片裁剪上传及预览。

虽然听过类似的需求，但自己手写还真的没写过，然后我就开始了网上冲浪时光(各种搜索，，，)。但这次，没有想象中那么简单了～～

网上看到的都是诸如FileReader、canvas、ArrayBuffer、FormData、Blob这些名词。我彻底懵了，这些平时都只是听过啊，用的也不多啊。经过了一番学习，我发现这些都属于前端二进制的知识范畴，所以在搞业务前，我准备先把涉及到的前端二进制梳理一遍，正所谓：底层基础决定上层建筑嘛 ?

FileReader

HTML5定义了FileReader作为文件API的重要成员用于读取文件，根据W3C的定义，FileReader接口提供了读取文件的方法和包含读取结果的事件模型。

创建实例

var reader = new FileReader();

方法

方法名	描述
abort	中止读取操作
readAsArrayBuffer	异步按字节读取文件内容，结果用 ArrayBuffer 对象表示
readAsBinaryString	异步按字节读取文件内容，结果为文件的二进制串
readAsDataURL	异步读取文件内容，结果用 data:url 的字符串形式表示
readAsText	异步按字符读取文件内容，结果用字符串形式表示

事件

事件名	描述
onabort	中断时触发
onerror	出错时触发
onload	文件读取成功完成时触发
onloadend	读取完成触发(无论成功或失败)
onloadstart	读取开始时触发
onprogress	读取中

示例

下面我们尝试把一个文件的内