前端截屏以及通过原生js实现的Blob以及和File、base64的转化

原因

项目中需要实现通过浏览器截屏下载图片的需求，在往上找到了一个比较好用的插件，但是眼瞎没看到插件自带有下载图片功能，正好这边没有自己去学习过这方面的知识，简单记录下摘自

Blob是什么

在JavaScript中，Blob（二进制大对象）对象是一种用于表示原始数据的类文件对象，它存储了任意类型的数据，通常是二进制数据，但也可以包含文本数据或其他格式的数据。Blob对象通常用于在客户端浏览器中处理二进制数据，比如文件上传、数据传输等场景。（Blob对象可以将任意类型的数据转换为二进制形式进行存储和处理。这使得Blob对象成为处理各种数据类型的有效工具，包括文本、图像、音频、视频等。在JavaScript中，Blob对象提供了一种统一的接口来处理这些数据，无论是从用户上传的文件中获取数据，还是从其他来源获取数据，都可以使用Blob对象来进行二进制处理。）

Blob的用途

Blob对象常见的使用情况包括：

文件上传：当用户通过网页上传文件时，浏览器会创建一个Blob对象来表示上传的文件数据，然后可以将该Blob对象发送到服务器端进行处理。
数据传输：在客户端与服务器端进行数据交互时，可以使用Blob对象来存储和传输二进制数据，例如通过XMLHttpRequest或Fetch API发送Blob对象。
图像处理：在客户端对图像进行处理时，可以将图像数据存储在Blob对象中，并通过Canvas API等技术进行操作和显示。
媒体处理：在处理音频或视频等媒体数据时，可以使用Blob对象来存储和处理媒体数据。

和file文件流的关系

以下是Blob对象和File对象之间的联系和区别：

Blob对象：
Blob对象是二进制数据的容器，可以包含任意类型的数据，如文本、图像、音频或视频等。
可以通过构造函数 new Blob(data, options) 创建 Blob 对象，其中 data 是包含数据的数组或数组缓冲区，options 是一个可选对象，用于指定 Blob 的 MIME 类型和结束符等信息。
File对象：
File对象是Blob对象的一种扩展，通常用于表示用户系统中的文件，具有文件名和最后修改日期等属性。
可以通过 new File(data, name, options) 构造函数创建 File 对象，其中 data 是包含数据的数组或数组缓冲区，name 是文件名，options 是一个可选对象，用于指定文件的 MIME 类型和最后修改日期等信息。

联系与区别：
File对象是Blob对象的子类，因此所有可以对Blob对象执行的操作也同样适用于File对象。
File对象在表示文件时具有额外的元数据，如文件名和最后修改日期等。
在实际使用中，Blob对象通常用于处理二进制数据，而File对象则用于处理用户系统中的文件，如文件上传和操作。

因此，可以说File对象是Blob对象的一种特殊情况，用于在JavaScript中表示用户系统中的文件，并提供了额外的文件相关的属性。

Blob和File文件流，base64的转化

Blob对象转文件 ：可以使用File构造函数将Blob对象转换为文件对象。File构造函数接受一个Blob对象和一个文件名作为参数，然后返回一个文件对象。


var blob = new Blob(["blob data"], { type: "text/plain" });
var file = new File([blob], "filename.txt");

Blob对象转Base64：可以使用FileReader对象将Blob对象转换为Base64编码的字符串。FileReader对象可以读取Blob对象中的数据，并以指定的编码格式输出。

  var blob = new Blob(["blob data"], { type: "text/plain" });
  var reader = new FileReader();
  reader.readAsDataURL(blob);
  reader.onload = function () {
    var base64String = reader.result;
};

Base64转Blob对象：可以将Base64编码的字符串转换回Blob对象。这可以通过创建一个新的Blob对象并指定Base64字符串的数据类型完成。这边有个坑，需要注意的是这里的base64String只是base64的编码，不包括前面的类型 data:image/png;base64,

var base64String = "base64 data";
var byteCharacters = atob(base64String);
var byteNumbers = new Array(byteCharacters.length);
for (var i = 0; i < byteCharacters.length; i++) {
  byteNumbers[i] = byteCharacters.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
var blob = new Blob([byteArray], { type: "image/jpeg" });

前端实现截屏

前人栽树后人乘凉插件region-screenshot-js 摘自