玩转图片流

最新推荐文章于 2024-05-09 10:54:11 发布

Jartto

最新推荐文章于 2024-05-09 10:54:11 发布

阅读量655

点赞数 1

本文链接：https://blog.csdn.net/Jartto/article/details/106681330

版权

做了一款图片识别软件，应用到了图片流，预览，Blob，Base64，以及类型转换等技术。这些技术在图片相关开发中必不可少，这一次，让我们玩转「图片流」吧！

我们先来看一下图片的使用场景：

当然，实际的应用远远比这些复杂，但是我们如果掌握了核心思想，那么无非就是「图片流」的获取和转换，下面让我们逐步深入吧！

上面提到了「图片流」，其实就是用二进制流来表示图片，也就是我们常说的「二进制图片」。

计算机的存储在物理上是都二进制的，所以文本文件与二进制文件的区别并不是物理上的，而是逻辑上的。

可能有人要问了，为什么要用二进制来表示图片呢？我们来看看二进制的优势：

二进制文件比较节约空间，在储存字符型数据时与普通存储并没有差别。但是在储存数字，特别是实型数字时，二进制更节省空间；
内存中参加计算的数据都是用二进制无格式储存起来的，因此，使用二进制储存到文件就更快捷。如果储存为文本文件，则需要一个转换的过程。在数据量很大的时候，两者就会有明显的速度差别了；　
涉及到一些比较精确的数据，使用二进制储存不会造成有效位的丢失；

看到这里，相信大家已经对图片流有了一定的认识。既然提到了存储，补充说明一下图片在后端存储方式：

FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

其中 File 对象可以是来自用户在一个 <input> 元素上选择文件后返回的 FileList 对象,也可以来自拖放操作生成的 DataTransfer 对象,还可以是来自在一个 HTMLCanvasElement 上执行 mozGetAsFile() 方法后返回结果。

官话说了一大堆，其实你只需要知道「它是用来读取文件的」就够了。

参数说明如下：

FileReader.error（只读）：一个 DOMException，表示在读取文件时发生的错误；
FileReader.readyState（只读）：表示 FileReader 状态的数字。取值如下：
- EMPTY 0 还没有加载任何数据.
- LOADING 1 数据正在被加载.
- DONE 2 已完成全部的读取请求.
FileReader.result（只读）：文件的内容。该属性仅在读取操作完成后才有效，数据的格式取决于使用哪个方法来启动读取操作。

还有几个事件处理函数：

可以用的方法如下：

FileReader.abort()：中止读取操作。在返回时，readyState 属性为 DONE。
FileReader.readAsArrayBuffer()：开始读取指定的 Blob 中的内容。一旦完成，result 属性将包含一个ArrayBuffer 来表示文件数据；
FileReader.readAsBinaryString()：开始读取指定的 Blob 中的内容。一旦完成，result 属性中将包含所读取文件的原始二进制数据。
FileReader.readAsDataURL()：开始读取指定的 Blob 中的内容。一旦完成，result 属性中将包含一个 data: URL 格式的字符串以表示所读取文件的内容。
FileReader.readAsText()：开始读取指定的 Blob 中的内容。一旦完成，result 属性中将包含一个字符串以表示所读取的文件内容。

上面的文档描述的很清楚了，但是估计你也没逐条细看，没关系，我们还有示例🙈

具体的应用场景可能如下：

onDrop(files) {
        
  files.forEach(file => {
        
    const reader = new FileReader();
    rea

关注