关于javascript:多图预警那些年被blob虐过的程序猿觉醒了

前言

本文以图文的形式深入浅出二进制的概念，后面的概念形容较为干燥，然而十分重要！心愿大家急躁往下看，前面有惊喜，定能让您虎躯一震~????

Blob

Blob示意二进制类型的大对象，通常是影像、声音或多媒体文件，在 javaScript 中 Blob 示意一个不可变、原始数据的类文件对象。

其构造函数如下:

new Blob(blobParts, options);

• lobParts: 数组类型，能够寄存任意多个 ArrayBuffer, ArrayBufferView, Blob 或者DOMString（会编码为 UTF-8），将它们连接起来形成 Blob 对象的数据。

• options: 可选项，用于设置 blob 对象的属性，能够指定如下两个属性：

  • type：寄存到 blob 中数组内容的 MIME 类型（默认为 ””）。
  • endings: 用于指定蕴含行结束符 n 的字符串如何被写入。值为 native 示意行结束符会被更改为适宜宿主操作系统文件系统的换行符（默认值为 transparent 示意会放弃 blob 中保留的结束符不变）

DOMString 是一个 UTF-16 字符串。因为 JavaScript 曾经应用了这样的字符串，所以 DOMString 间接映射到 一个 String。

ArrayBuffer（二进制数据缓冲区）、ArrayBufferView（二进制数据缓冲区的 array-like 视图）

示例如下????

1. 创立一个蕴含 domstring 对象的 blob 对象

    const blob = new Blob(['<div>john</div>'], {type: 'text/xml'});
    console.log(blob); // Blob {size: 15, type: "text/xml"}

1. 创立一个蕴含 arraybuffer 对象的 blob 对象

    var abf = new ArrayBuffer(8);
    const blob = new Blob([abf], {type: 'text/plain'});
    console.log(blob); // Blob {size: 8, type: "text/plain"}

1. 创立一个蕴含 arraybufferview 对象的 blob 对象

    var abf = new ArrayBuffer(8);
    var abv = new Int16Array(abf);
    const blob = new Blob(abv, { type: 'text/plain'});
    console.log(blob); // Blob {size: 4, type: "text/plain"}

属性

Blob 对象有两个属性，参见下表????：

办法

• slice(start:number, end:number, contentType:DOMString)：相似于数组的 slice 办法，将原始 Blob 对象依照指定范畴宰割成新的 blob 对象并返回, 能够用作切片上传

  • start：开始索引，默认为 0
  • end：完结索引，默认为最初一个索引
  • contentType：新 Blob 的 MIME 类型，默认状况下为空字符串
• stream()：返回一个能读取 blob 内容的ReadableStream。
• text()：返回一个 Promise 对象且蕴含 blob 所有内容的 UTF- 8 格局的 USVString。
• arrayBuffer()：返回一个Promise 对象且蕴含 blob 所有内容的二进制格局的ArrayBuffer。

将 blob（或者 file）二进制文件保留到 formData 进行网络申请（之后能够获取到图片的 imageUrl 能够用作图片展现或者后续的通过 websocket 发送图片地址）

File

File对象是一种非凡的 Blob 对象, 继承了所有 Blob 的属性和办法，当然同样也能够用作 formData 二进制文件上传

File 的获取：

上面咱们别离应用 input 和拖放形式抉择多张图片操作????:

• input 获取本地文件

  <input type="file" multiple id="f" />
  <script>
    var elem = document.getElementById('f');
    elem.onchange = function (event) {
      var files = event.target.files;
      console.log(files); // [{{name: "1.jpg",lastModified: 1594369580771...},{name:'2.jpg',lastModified: 1596012406708...}]
      var file = files[0];
      console.log(file); // {name: "1.jpg",lastModified: 1594369580771,size: 22344,type: "image/jpeg"...}
      console.log(file instanceof File); //true
      console.log(files instanceof FileList); // true
      
      /* File 继承 Blob */
      console.log(file.__proto__.__proto__); // Blob {size: 22344, type: ""}
    };
  </script>

• 拖放获取

  <div id="content" ondrop="drop(event)" ondragover="allowDrop(event);" />
  <script>
    function allowDrop(ev) {ev.preventDefault();
    }
    function drop(ev) {ev.preventDefault();
      const files = ev.dataTransfer.files;
      console.log(files); // [{{name: "1.jpg",lastModified: 1594369580771...},{name:'2.jpg',lastModified: 1596012406708...}]
      console.log(files instanceof FileList); // true
    }
  </script>
  <style type="text/css">
    #content {
      width: 500px;
      height: 500px;
      border: 1px solid brown;
    }
  </style>

为 input 元素增加 multiple 属性，容许用户抉择多个文件，用户抉择的每一个文件都是一个 file 对象，而 FileList 对象则是这些 file 对象的列表，代表用户抉择的所有文件，是 file 对象的汇合。

属性

File 对象属性，参见下表????：

办法

File 对象没有本人的实例办法，因为继承了 Blob 对象，因而能够应用 Blob 的实例办法 slice()。

数据缓冲区

从 XHR、File API、Canvas 等等各种中央，读取了一大串字节流，如果用 JS 里的 Array 去存，又节约，又低效。在编程中，数据缓冲区 （或简称为缓冲区）是物理内存中中操作二进制数据的存储区（比硬盘驱动器拜访快），用于在数据从一个地位挪动到另一地位时存储长期数据， 解释器 借助存储二进制数据的内存缓冲区读取行。主内存中有一个正在运行的文件, 如果解释器必须返回文件以读取每个位，则执行过程将消耗大量工夫。为了避免这种状况，JavaScript 应用数据缓冲区，该缓冲区将一些位存储在一起，而后将所有位一起发送给解释器。这样，JavaScript 解释器就不用放心从文件数据中检索文件。这种办法节俭了执行工夫并放慢了应用程序的速度。各种缓冲区类对数据执行无效的二进制操作，包含 File，Blob，ArrayBuffer 和Array。抉择的办法决定了内存中缓冲区的内部结构。

Buffer

Buffer是 Node.js 提供的对象，前端没有。它个别利用于 IO 操作，例如接管前端申请数据时候，能够通过 Buffer 相干的 API 创立一个专门寄存二进制数据的缓存区对接管到的前端数据进行整合，一个 Buffer 相似于一个整数数组，但它对应于V8 堆内存之外的一块原始内存。

ArrayBuffer、ArrayBufferView

ArrayBuffer

ArrayBuffer示意 固定长度 的二进制数据的原始缓冲区，它的作用是调配一段能够存放数据的间断内存区域，因而对于高密度的拜访（如音频数据）操作而言它比 JS 中的 Array 速度会快很多，ArrayBuffer 存在的意义就是作为数据源提前写入在内存中，因而其长度固定

先大抵看下 ArrayBuffer 的性能：

ArrayBuffer 对象的构造函数如下(length 示意 ArrayBuffer 的长度)????:

ArrayBuffer(length);

Array 和 ArrayBuffer 的区别????：

属性

ArrayBuffer 对象属性，参见下表????：

办法

• slice: 有两个参数????begin示意起始，end示意完结点。办法返回一个新的 ArrayBuffer，它的内容是这个 ArrayBuffer 的字节正本，从 begin（包含），到 end（不包含）。

ArrayBuffer 不能间接操作，而是要通过 TypedArray 或DataView对象来操作，它们会将缓冲区中的数据转换为各种数据类型的数组，并通过这些格局来读写缓冲区的内容。????

ArrayBufferView

因为 ArrayBuffer 对象不提供任何间接读写内存的办法，而 ArrayBufferView 对象实际上是建设在 ArrayBuffer 对象根底上的 视图 ，它指定了 原始二进制数据 的根本处理单元，通过 ArrayBufferView 对象来读取 ArrayBuffer 对象的内容。类型化数组 (TypedArrays) 和 DataView 是 ArrayBufferView 的实例。

TypedArrays

类型化数组 (TypedArrays) 是 JavaScript 中新呈现的一个概念，专为拜访原始的二进制数据而生，实质上，类型化数组和 ArrayBuffer 是一样的，只不过是他具备读写性能

类型数组的类型有：????：

类型转换如图????：

举一些代码例子展现如何转换：

// 创立一个 8 字节的 ArrayBuffer  
var b = new ArrayBuffer(8);  
  
// 创立一个指向 b 的视图 v1，采纳 Int32 类型，开始于默认的字节索引 0，直到缓冲区的开端  
var v1 = new Int32Array(b);  // Int32Array(2) [0, 0]
v1[0] = 1
console.log(v1); // Int32Array(2) [1, 0]
  
// 创立一个指向 b 的视图 v2，采纳 Uint8 类型，开始于字节索引 2，直到缓冲区的开端  
var v2 = new Uint8Array(b, 2);  // Uint8Array(6) [0, 0, 0, 0, 0, 0]
  
// 创立一个指向 b 的视图 v3，采纳 Int16 类型，开始于字节索引 2，长度为 2  
var v3 = new Int16Array(b, 2, 2);  // Int16Array(2) [0, 0]

因为一般 Javascript 数组应用的是 Hash 查找形式，而类型化数组间接拜访固定内存，因而，速度很赞，比传统数组要快！同时，类型化数组天生解决二进制数据，这对于 XMLHttpRequest、canvas、webGL 等技术有着先天的劣势。

TypedArray 的利用如何拼接两个音频文件

fetch 申请音频资源 -> ArrayBuffer -> TypedArray -> 拼接成一个 TypedArray -> ArrayBuffer -> Blob -> Object URL

DataView

DataView对象能够在 ArrayBuffer 中的任意地位读取和存储不同类型的二进制数据。

创立 DataView 的语法如下：

var dataView = new DataView(DataView(buffer, byteOffset[可选], byteLength[可选]);

属性

DataView 对象有三个属性，参见下表????：

办法

• setint8(): 从 DataView 起始地位以 byte 为计数的指定偏移量（byteOffset）处存储一个 8 -bit 数（一个字节）
• getint8(): 从 DataView 起始地位以 byte 为计数的指定偏移量（byteOffset）处获取一个 8 -bit 数（一个字节）

除此之外还有 getInt16, getUint16, getInt32, getUint32… 应用办法统一，这里就不一一例举

用法如下????:

let buffer = new ArrayBuffer(32);
let dataView = new DataView(buffer,0);
dataView.setInt16(1,56);
dataView.getInt16(1); // 56

FileReader

咱们无奈间接拜访 Blob 或者文件对象的内容，如果想要读取它们并转化为其余格局的数据，能够借助 FileReader 对象的 API 进行操作

• readAsText(Blob)：将 Blob 转化为文本字符串
• readAsArrayBuffer(Blob)：将 Blob 转为 ArrayBuffer 格局数据
• readAsDataURL(): 将 Blob 转化为 Base64 格局的 DataURL

应用别离如下????:

    const blob = new Blob(['<xml>foo</xml>'], {type: 'text/xml'});
    console.log(blob); // Blob(14) {size: 14, type: "text/xml"}

    const reader = new FileReader();
    reader.onload = () => {console.log(reader.result);
    };
    reader.readAsText(blob); // <xml>foo</xml>
    reader.readAsArrayBuffer(blob); // ArrayBuffer(14) {}
    reader.readAsDataURL(blob); // data:text/xml;base64,PHhtbD5mb288L3htbD4

上面咱们尝试把一个文件的内容通过字符串的形式读取进去：

<input type="file" id='f' />
<script>
  document.getElementById('f').addEventListener('change', function (e) {var file = this.files[0];
    // 首先，须要创立一个 FileReader 的实例。const reader = new FileReader();
    reader.onload = function () {
        // 在加载实现时回调
        const content = reader.result;
        console.log(content);
    }
    reader.readAsText(file); // 将 blob 转化为文本字符串读取
  }, false);
</script>

读取后果如下????:

BlobURL

BlobURL（ObjectURL）是一种 伪协定 ，只能由浏览器在外部生成，咱们晓得script/img/video/iframe 等标签的 src 属性和 background 的 url 能够通过 url 和 base64 来显示，咱们同样能够把 blob 或者 file 转换为 url 生成 BlobURL 来展现图像，BlobURL 容许 Blob 和 File 对象用作图像，下载二进制数据链接等的 URL 源。

图像展现????:

  <div id="content">
    <input type="file" multiple id="f" />
  </div>
  <script>
    const elem = document.getElementById('f');
    const content = document.getElementById('content');
    
    // 依据不同浏览器封装一个转换 BlobUrl 的办法:file 能够是 File 对象也能够是 Blob 对象
    const getObjectURL = (file) => {
      let url;
      if (window.createObjectURL) {url = window.createObjectURL(file);
      } else if (window.URL) {url = window.URL.createObjectURL(file);
      } else if (window.webkitURL) {url = window.webkitURL.createObjectURL(file);
      }
      return url;
    };

    elem.onchange = function (event) {
      const files = event.target.files;
      const file = files[0];
      const img = document.createElement('img');
      img.src = getObjectURL(file);
      content.appendChild(img);
    };
  </script>

咱们查看 demo 页面这个 mm 图片元素，会发现其 URL 地址既不是传统 HTTP，也不是 Base64 URL，而是 blob: 结尾的字符串, 能够通过将其放在地址栏中进行查看。

文件下载????:

<body>
 <button onclick="download()">download.txt</button>

 <script>
      const getObjectURL = (file) => {
        let url;
        if (window.createObjectURL) {url = window.createObjectURL(file);
        } else if (window.URL) {url = window.URL.createObjectURL(file);
        } else if (window.webkitURL) {url = window.webkitURL.createObjectURL(file);
        }
        return url;
      };
      function download() {
        const fileName = 'download.txt';
        const myBlob = new Blob(['johnYu'], {type: 'text/plain'});
        downloadFun(fileName, myBlob);
      }
      function downloadFun(fileName, blob) {const link = document.createElement('a');
        link.href = getObjectURL(blob);
        link.download = fileName;
        link.click();
        link.remove();
        URL.revokeObjectURL(link.href);
      }
    </script>
  </body>

点击按钮下载文档，文档内容为:johnYu

这里不调用 revokeObjectURL 时拜访 chrome://blob-internals/ 能够看到以后外部的 blob 文件列表:

不再应用的 BlobUrl 后续会主动革除（敞开浏览器也会主动革除），然而最好应用 URL.revokeObjectURL(url) 手动革除它们：

URL.revokeObjectURL('blob:http://127.0.0.1:5500/d2a9a812-0dbf-41c5-a96b-b6384d33f281');

执行后再次拜访 chrome://blob-internals/ 能够看到文件曾经被革除

dataURL

dataURL容许内容的创建者将较小的文件嵌入到文档中。与惯例的 URL 应用场合相似

其语法格局格局如下????：

data:[<mediatype>][;base64],data

• data: 前缀
• mediatype表明数据类型, 是一个 MIME 类型字符串，如 image/jpeg 示意一个 JPEG 图片文件。如果省略，默认值为text/plain;charset=US-ASCII。
• base64: 标记位（如果是文本，则可选）
• data: 数据自身

如何获取 DataUrl

1. 下面示例中应用的办法 readAsDataURL()就是将 Blob 转化为 Base64 格局的 DataUrl;
2. 应用原生 Web API 编码 / 解码

Javascript 中有两个函数负责编码和解码 base64 字符串，别离是 atob 和 btoa。两者都只针对 Data URL 中的 data 进行解决。

btoa('hello base64') // "PHhtbD5mb288L3htbD4="
atob('PHhtbD5mb288L3htbD4=') // "<xml>foo</xml>"

1. Canvas 的 toDataURL 办法:

Canvas 提供了 toDataURL 办法，用于获取 canvas 绘制内容，将其转为 base64 格局。

  <body>
    <canvas id="canvas" width="200" height="50"></canvas>
    <textarea id="content" style="width: 200px; height: 200px"></textarea>

    <script>
      var canvas = document.getElementById('canvas');
      if (canvas.getContext) {var ctx = canvas.getContext('2d');
        // canvas 的绘制
        ctx.font = 'Bold 20px Arial';
        ctx.textAlign = 'left';
        ctx.fillStyle = 'purple';
        ctx.fillText('johnYu', 10, 30);
        // 获取 Data URL
        document.getElementById('content').value = canvas.toDataURL();}
    </script>
  </body>

如下图所示，文本框中的内容即为 canvas 中绘制内容的 base64 格局。

如果咱们将后面的返回后果 data:text/xml;base64,PHhtbD5mb288L3htbD4= 放在浏览器的地址栏中，则能够看到显示的内容。

DataUrl 的应用

1. 因为能够将其用作 URL 的代替，因而 DataURL 和 BlobUrl 一样能够在 script/img/video/iframe 等标签的 src 属性和 background 的 url 中应用，用法与 BlobUrl 基本一致，只须要将后面的 elem.onchange 做如下革新

<body>
    <div id="content">
      <input type="file" multiple id="f" />
    </div>
    <script>
      const elem = document.getElementById('f');
      const content = document.getElementById('content');

      elem.onchange = function (event) {
        const files = event.target.files;
        const file = files[0];
        const img = document.createElement('img');
-        img.src = getObjectURL(file);
+        const reader = new FileReader();
+        reader.onload = function () {
+          img.src = reader.result;
+        };
+        reader.readAsDataURL(file);
        content.appendChild(img);
      };
    </script>
  </body>

1. 因为数据自身由 URL 示意，因而能够将其保留在 Cookie 中传递给服务器。
2. 当图片的体积太小，占用一个 HTTP 会话不是很值得时。
3. 当拜访内部资源很麻烦或受限时

4. DataUrl 不会被浏览器缓存，然而小局部会通过 css 缓存，在上面例子中，DataUrl 的应用是完全符合场景的。它防止了让这个小小的背景图片单独产生一次 HTTP 申请，而且，这个小图片还能同 CSS 文件一起被浏览器缓存起来，反复使 用，不会每次应用时都加载一次。只有这个图片不是很大，而且不是在 CSS 文件里重复应用，就能够 DataUrl 办法出现图片升高页面的加载工夫，改善用户的浏览体验。

    background-image: url("data:image/gif;base64,R0lGODlhAwADAIAAAP///8zMzCH5BAAAAAAALAAAAAADAAMAAAIEBHIJBQA7"); 

5. 作为下载连贯应用

  <script>
    const createDownload = (fileName, content) => {const blob = new Blob([content]);
      const reader = new FileReader();
      const link = document.createElement('a');
      link.innerHTML = fileName;
      link.download = fileName;
      reader.onload = () => {
        link.href = reader.result;
        document.getElementsByTagName('body')[0].appendChild(link);
      };
      reader.readAsDataURL(blob);
    };

    createDownload('download.txt', 'johnYu');
  </script>

点击 a 标签后后下载文本内容为 johnYu 的 txt 文件, 在上面的 BlobURL 同样能够实现????

区别

BlobURL 根本用法与 DataUrl 雷同，都能够通过将其放在地址栏中进行查看也能够用作一般 URL 应用。

然而，存在以下差别。

1. BlobUrl 始终是惟一字符串，即时你每次传递雷同的 Blob，每次也会生成不同的 BlobUrl；DataUrl 值追随 blob 变动；
2. 就 BlobUrl 而言，它并不代表数据自身，数据存储在浏览器中，BlobUrl 只是拜访它的 key。数据会始终无效，直到敞开浏览器或者手动革除。而 DataUrl 是间接编码的数据自身。因而即便将 BlobUrl 传递给服务器等也无法访问数据。敞开浏览器后依然能够在地址栏拜访后 DataUrl，然而拜访不到 BlobUrl
3. BlobUrl 的长度个别比拟短，但 DataUrl 因为间接存储图片 base64 编码后的数据，往往很长(Base64 编码的数据体积通常会比二进制格局的图片体积大 1 /3。)，因而当显式大图片时，应用 BlobUrl 能获取更好的可能性，速度和内存比 DataUrl 更无效
4. BlobUrl 能够不便的应用 XMLHttpRequest 获取源数据（xhr.responseType = ‘blob’）。对于 DataUrl，并不是所有浏览器都反对通过 XMLHttpRequest 获取源数据的

  <body>
    <button onclick="download1()">XMLHttpRequest 下载 </button>
    <button onclick="download2()">fetch 下载 </button>
    <img id="img" />
    <script>
      var eleAppend = document.getElementById('forAppend');
      const url = 'https://sf3-ttcdn-tos.pstatp.com/img/user-avatar/9ecb4e119c26e64b8b4ec5258f159b3b~300x300.image';
      const pingan = document.querySelector('#pingan');
      function download1() {const xhr = new XMLHttpRequest();
        xhr.open('get', url, true);
        xhr.responseType = 'blob';
        xhr.onload = function () {if (this.status == 200) {renderImage(this.response);
          }
        };
        xhr.send(null);
      }
      function download2() {fetch(url)
          .then((res) => {return res.blob();
          })
          .then((myBlob) => {renderImage(myBlob);
          });
      }

      function renderImage(blob) {
        window.URL = window.URL || window.webkitURL;
        var img = document.getElementById('img');
        img.onload = function (e) {window.URL.revokeObjectURL(img.src); // 革除开释
        };
        img.src = window.URL.createObjectURL(blob);
      }
    </script>
  </body>

1. BlobUrl 除了能够用作图片资源的网络地址，BlobUrl 也能够用作其余资源的网络地址，例如 html 文件、json 文件等，为了保障浏览器能正确的解析 BlobUrl 返回的文件类型，须要在创立 Blob 对象时指定相应的 type

    const createDownload = (fileName, content) => {const blob = new Blob([content], {type: 'text/html'});
      const link = document.createElement('a');
      link.innerHTML = fileName;
      link.download = fileName;
      link.href = getObjectURL(blob);
      document.getElementsByTagName('body')[0].appendChild(link);
    };
    createDownload('download.html', '<button>foo</button>');

1. DataUrl 不会被浏览器缓存，这意味着每次拜访这样页面时都被下载一次。这是一个应用效率方面的问题——尤其当这个图片被整个网站大量应用的时候。然而小局部能够通过 css 缓存

canvas

Canvas对象元素负责在页面中设定一个区域，而后就能够通过 JavaScript 动静地在这个区域中绘制图形。

办法

• toDataURL(type, encoderOptions))：以指定格局返回 DataUrl, 该办法接管两个可选参数

  • type：示意图片格式，默认为 image/png
  • encoderOptions：示意图片的品质，在指定图片格式为 image/jpeg 或 image/webp 的状况下，能够从 0 到 1 的区间内抉择图片的品质。如果超出取值范畴，将会应用默认值 0.92，其余参数会被疏忽。

• toBlob(callback, type, encoderOptions)：发明 Blob 对象，用于展现 canvas 的图片，默认图片类型是 image/png，分辨率是96dpi

  • callback: 参数是 blob 对象的回调函数

• getImageData(x,y,width,height)：返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据。

  • x: 开始复制的左上角地位的 x 坐标。
  • y: 开始复制的左上角地位的 y 坐标。
  • width: 将要复制的矩形区域的宽度。
  • height: 将要复制的矩形区域的高度。

• putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight)：将图像数据（从指定的 ImageData 对象）放回画布上。

  • imgData: 规定要放回画布的 ImageData 对象。
  • x: ImageData 对象左上角的 x 坐标，以像素计。
  • y: ImageData 对象左上角的 y 坐标，以像素计。
  • dirtyX: 可选。程度值（x），以像素计，在画布上搁置图像的地位。
  • dirtyY: 可选。程度值（y），以像素计，在画布上搁置图像的地位。
  • dirtyWidth: 可选。在画布上绘制图像所应用的宽度。
  • dirtyHeight: 可选。在画布上绘制图像所应用的高度。

利用场景

当咱们须要获取到 canvas 的内容，能够用到 toDataURL 和toBlob属性 (可用于签名，图片剪裁，图片压缩等场景)，putImageData、getImageData 能够用于图片灰度或者复制时应用（见前面的应用场景章节????）

获取内容:

<body>
    <div id="content">
      <button onclick="drawnImg()"> 绘制图像 </button>
      <button onclick="getImg()"> 获取图像 </button>
      <canvas style="border: 1px solid black" id="drawing" width="200" height="200">A drawing of something.</canvas>
      <img src="./timg.jpg" alt="" />
    </div>
    <script>
      var drawing = document.getElementById('drawing');
      var quality = 0.3;
      const imgType = 'image/jpeg';

      var drawnImg = function () {if (drawing.getContext) {var context = drawing.getContext('2d');
          // 获得图像的数据 URI
          var image = document.images[0];
          context.drawImage(image, 20, 20, 100, 100);
        }
      };
      var getImg = async function () {const content = getContent('base64');
        console.log(content);
        const content1 = await getContent('file');
        console.log(content1);
      };
      var getContent = function (type) {switch (type) {
          case 'base64':
            {const imgURL = drawing.toDataURL(imgType, quality);
              return imgURL;
            }
            break;
          case 'file':
            {
              // 转为文件格式
              return new Promise((resolve) => {
                drawing.toBlob((blob) => {resolve(blob);
                  },
                  imgType,
                  quality
                );
              });
            }
            break;
        }
      };
    </script>
  </body>

关系及转换

字符串 → Uint8Array

    var str = 'ab';
    console.log(Uint8Array.from(str.split(''), (e) => e.charCodeAt(0))); // Uint8Array(2) [97, 98]

Uint8Array → 字符串

    var u8 = Uint8Array.of(97, 98);
    console.log(Array.from(u8, (e) => String.fromCharCode(e)).join('')); // ab

字符串 → DataUrl

    var str = 'ab';
    console.log('data:application/octet-stream;base64,' + btoa(str)); // data:application/octet-stream;base64,YWI=

DataUrl -> 字符串

    var data = 'data:application/octet-stream;base64,YWI=';
    console.log(atob(data.split(',')[1])); // ab

Uint8Array -> ArrayBuffer

    var u8 = Uint8Array.of(1, 2);
    console.log(u8.buffer); // ArrayBuffer(2) {}

ArrayBuffer -> Uint8Array

    var buffer = new ArrayBuffer(2);
    console.log(new Uint8Array(buffer)); // Uint8Array(2) [0, 0]

ArrayBuffer -> DataView

    var buffer = new ArrayBuffer(2);
    var dataView = new DataView(buffer, 0); // DataView(2) {}

DataView -> ArrayBuffer

    console.log(dataView.buffer); // ArrayBuffer(2) {}

ArrayBuffer → Blob

    var buffer = new ArrayBuffer(32);
    var blob = new Blob([buffer]);  // Blob {size: 32, type: ""}

UintXXArray → Blob

    var u8 = Uint8Array.of(97, 32, 72, 101, 108, 108, 111, 32, 119, 111, 114, 108, 100, 33);
    var blob = new Blob([u8]);

字符串 → Blob

    var blob = new Blob(['Hello World!'], {type: 'text/plain'}); // Blob {size: 12, type: "text/plain"}

以上都是用 new Blob()转 blob

DataUrl -> blob

    var data = 'data:application/octet-stream;base64,YWI=';
    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});
    }
    console.log(dataURLtoBlob(data)); // Blob {size: 2, type: "application/octet-stream"}

Blob →

须要用到 FileReader 的 Api 转换 readAsText(Blob)、readAsArrayBuffer(Blob)、readAsDataURL()，然而须要异步执行

    var blob = new Blob(['a Hello world!'], {type: 'text/plain'});
    var reader = new FileReader();
    reader.readAsText(blob, 'utf-8');
    reader.onload = function (e) {console.info(reader.result); // a Hello world!
    };
    reader.onerror = function (e) {console.error(reader.error);
    };

能够用 promise 做屡次转换

    var blob = new Blob(['a Hello world!'], {type: 'text/plain'});
    function read(blob) {var fr = new FileReader();
      var pr = new Promise((resolve, reject) => {fr.onload = (eve) => {resolve(fr.result);
        };
        fr.onerror = (eve) => {reject(fr.error);
        };
      });

      return {arrayBuffer() {fr.readAsArrayBuffer(blob);
          return pr;
        },
        binaryString() {fr.readAsBinaryString(blob);
          return pr;
        },
        dataURL() {fr.readAsDataURL(blob);
          return pr;
        },
        text() {fr.readAsText(blob);
          return pr;
        },
      };
    }
    var pstr1 = read(blob).binaryString();
    var pstr2 = read(blob)
      .arrayBuffer()
      .then((e) => Array.from(new Uint8Array(e), (e) => String.fromCharCode(e)).join(''));
    Promise.all([pstr1, pstr2]).then((e) => {console.log(e[0]); // a Hello world!
      console.log(e[0] === e[1]); // true
    });![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/78f4c53fd471419fb10f3c803a4dd94a~tplv-k3u1fbpfcp-watermark.image)

利用场景

图像灰度化

这里次要用到 canvas 和imageData的转换

<body>
    <button onclick="drawngray()"> 黑白图片 </button>
    <img src="./syz.jpg" alt="" />
    <canvas id="myCanvas">canvas</canvas>
    <script>
      var drawngray = function () {var myCanvas = document.getElementById('myCanvas');
        if (myCanvas.getContext) {var context = myCanvas.getContext('2d');
          var image = document.images[0];
          // 动静设置 canvas 的大小
          myCanvas.width = image.width;
          myCanvas.height = image.height;
          var imageData, data, i, len, average, red, green, blue, alpha;
          // 绘制原始图像
          context.drawImage(image, 0, 0);
          // 获得图像数据
          imageData = context.getImageData(0, 0, image.width, image.height);
          data = imageData.data;
          for (i = 0, len = data.length; i < len; i += 4) {red = data[i];
            green = data[i + 1];
            blue = data[i + 2];
            // alpha = data[i + 3];
            // 求得 rgb 平均值
            average = Math.floor((red + green + blue) / 3);
            // 设置色彩值，透明度不变
            data[i] = average;
            data[i + 1] = average;
            data[i + 2] = average;
          }

          // 回写图像数据并显示后果
          imageData.data = data;
          context.putImageData(imageData, 0, 0);
        }
      };
    </script>
  </body>

除次之外 getImageData 和 putImageData 还能够用作 cavas 图片复制:https://www.w3school.com.cn/tiy/t.asp?f=html5_canvas_getimagedata

图片压缩

在前端要实现图片压缩，咱们能够利用 Canvas 对象提供的 toDataURL() 办法

compress.js

const MAX_WIDTH = 800; // 图片最大宽度

function compress(base64, quality, mimeType) {let canvas = document.createElement('canvas');
  let img = document.createElement('img');
  img.crossOrigin = 'anonymous';
  return new Promise((resolve, reject) => {
    img.src = base64;
    img.onload = () => {
      let targetWidth, targetHeight;
      if (img.width > MAX_WIDTH) {
        targetWidth = MAX_WIDTH;
        targetHeight = (img.height * MAX_WIDTH) / img.width;
      } else {
        targetWidth = img.width;
        targetHeight = img.height;
      }
      canvas.width = targetWidth;
      canvas.height = targetHeight;
      let ctx = canvas.getContext('2d');
      ctx.clearRect(0, 0, targetWidth, targetHeight); // 革除画布
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
      // 通过 toDataURL 压缩后的 base64
      let imageData = canvas.toDataURL(mimeType, quality / 100);
      resolve(imageData);
    };
  });
}

test.html

  <body>
    <input type="file" accept="image/*" onchange="loadFile(event)" />
    <script src="./compress.js"></script>
    <script>
      function dataUrlToBlob(base64) {var arr = base64.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 uploadFile(url, blob) {let formData = new FormData();
        let request = new XMLHttpRequest();
        // 封装到 FormData 中进行文件的上传
        formData.append('image', blob);
        request.open('POST', url, true);
        request.send(formData);
      }

      const loadFile = function (event) {const reader = new FileReader();
        reader.onload = async function () {let compressedDataURL = await compress(reader.result, 90, 'image/jpeg');
          // 压缩后将 base64 转为 Blob 对象缩小传输数据量
          let compressedImageBlob = dataUrlToBlob(compressedDataURL);
          uploadFile('https://httpbin.org/post', compressedImageBlob);
        };
        // 获取用户选取的图片文件, 通过 FileReader 转化成 base64
        reader.readAsDataURL(event.target.files[0]);
      };
    </script>
  </body>

分片上传

<body>
    <input type="file" name="file" onchange="selfile();" />

    <script>
      const url = 'https://httpbin.org/post';
      /**
       * @param file 原始文件
       * @param chunkSize 默认每次上传分片大小
       */
      async function chunkedUpload(file, chunkSize = 1024 * 1024 * 5) {
        // 将文件拆分成 chunkSize 大小的分块，而后每次申请只须要上传这一个局部的分块即可
        for (let start = 0; start < file.size; start += chunkSize) {
          // File 对象继承自 Blob 对象，因而能够应用 slice 办法对大文件进行切
          const chunk = file.slice(start, start + chunkSize + 1);
          const fd = new FormData();
          fd.append('data', chunk);

          await fetch(url, { method: 'post', body: fd})
            .then((res) => res.text())
            .then((res) => console.log(res)); // 打印上传后果
        }
      }

      function selfile() {let file = document.querySelector('[name=file]').files[0];

        // 自定义分片大小
        const LENGTH = 1024 * 1024 * 1;
        chunkedUpload(file, LENGTH);
      }
    </script>
  </body>

服务器接管到这些切片后，再将他们拼接起来就能够了，上面是 PHP 拼接切片的示例代码:

$filename = './upload/' . $_POST['filename'];// 确定上传的文件名
// 第一次上传时没有文件，就创立文件，尔后上传只须要把数据追加到此文件中
if(!file_exists($filename)){move_uploaded_file($_FILES['file']['tmp_name'],$filename);
}else{file_put_contents($filename,file_get_contents($_FILES['file']['tmp_name']),FILE_APPEND);
    echo $filename;
}

测试时记得批改 nginx 的 server 配置，否则大文件可能会提醒 413 Request Entity Too Large 的谬误。

server {
    // ...
    client_max_body_size 50m;
}

参考文章 ????

❤️ 了解 DOMString、Document、FormData、Blob、File、ArrayBuffer 数据类型

❤️ 聊聊 JS 的二进制家族：Blob、ArrayBuffer 和 Buffer

❤️ 你不晓得的 Blob

扩大 ????

如果你感觉本文对你有帮忙，能够查看我的其余文章❤️：

???? vue3 实战笔记 | 疾速入门????

???? 10 个简略的技巧让你的 vue.js 代码更优雅????

???? 零距离接触 websocket????

???? Web 开发应理解的 5 种设计模式

???? Web 开发应该晓得的数据结构

???? 如何在 JavaScript 中获取屏幕，窗口和网页大小