js二进制数据及其互相转化实现详解

 更新时间:2023年02月27日 09:53:36   作者:元子不圆呀  
这篇文章主要为大家介绍了js二进制数据及其互相转化实现详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

file

在js中有很多二进制数据,有file,base64,Blob,ArrayBuffer,FileReader。这些二进制数据在文件导出和下载的时候是经常会用到的,我们这篇文章就是介绍这些二进制数据以及它们之间的转化。

文件(File)接口提供有关文件的信息,并允许网页中的 JavaScript 访问其内容。实际上,File 对象是特殊类型的 Blob,且可以用在任意的 Blob 类型的 context 中。Blob 的属性和方法都可以用于 File 对象。

file文件

file文件一般有两种来源

  • <input> 元素上选择文件后返回的 FileList 对象;
  • 文件拖放操作生成的 DataTransfer 对象;

每个 File 对象都包含以下属性,这些属性都继承自 Blob 对象:

  • lastModified:引用文件最后修改日期,为自1970年1月1日0:00以来的毫秒数;
  • lastModifiedDate:引用文件的最后修改日期;
  • name:引用文件的文件名;
  • size:引用文件的文件大小;
  • type:文件的媒体类型(MIME);
  • webkitRelativePath:文件的路径或 URL。

base64

Base64 是一种基于64个可打印字符来表示二进制数据的表示方法。Base64 编码普遍应用于需要通过被设计为处理文本数据的媒介上储存和传输二进制数据而需要编码该二进制数据的场景。这样是为了保证数据的完整并且不用在传输过程中修改这些数据。

Blob

Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取,也可以转换成 ReadableStream 来用于数据操作。

也就是说blob对象是原始二进制数据对象,是不可修改的。

blob的用法

new Blob(array, options);

array:由 ArrayBufferArrayBufferViewBlobDOMString 等对象构成的,将会被放进 Blob

options:可选的 BlobPropertyBag 字典,它可能会指定如下两个属性

type:默认值为 "",表示将会被放入到 blob 中的数组内容的 MIME 类型。

endings:默认值为"transparent",用于指定包含行结束符\n的字符串如何被写入,不常用。

ArrayBuffer

ArrayBuffer 对象用来表示通用的、固定长度的原始二进制数据缓冲区。ArrayBuffer 的内容不能直接操作,只能通过 DataView 对象或 TypedArrray 对象来访问。这些对象用于读取和写入缓冲区内容。

TypedArray:用来生成内存的视图,通过9个构造函数,可以生成9种数据格式的视图。

  • Int8Array
  • Uint8Array
  • Uint8ClampedArray
  • Int16Array
  • Unit16Array
  • Int32Array
  • Uint32Array
  • Float32Array
  • Float64Array

DataViews:用来生成内存的视图,可以自定义格式和字节序。

ArrayBuffer的使用

new ArrayBuffer(bytelength)

FileReader

FileReader用于读取文件并提取其内容, 可以将 Blob 读取为不同的格式。

FileReader的使用

创建

const reader = new FileReader();

FileReader还有很多方法和事件,感兴趣的可以去MDN上查看。

二进制类型数据的互相转化

file转base64

let reader = new FileReader();
reader.readAsDataURL(file[0])

base64转blob

const base64toBlob = (base64Data, contentType, sliceSize) => {
  const byteCharacters = atob(base64Data);
  const byteArrays = [];
  for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    const slice = byteCharacters.slice(offset, offset + sliceSize);
    const byteNumbers = new Array(slice.length);
    for (let i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }
    const byteArray = new Uint8Array(byteNumbers);
    byteArrays.push(byteArray);
  }
  const blob = new Blob(byteArrays, {type: contentType});
  return blob;
}

blob转ArrayBuffer

function blobToArrayBuffer(blob) { 
  return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onload = () => resolve(reader.result);
      reader.onerror = () => reject;
      reader.readAsArrayBuffer(blob);
  });
}

blob转base64

function blobToBase64(blob) {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.onloadend = () => resolve(reader.result);
    reader.readAsDataURL(blob);
  });
}

ArrayBuffer转blob

const blob = new Blob([new Uint8Array(buffer, byteOffset, length)]);

ArrayBuffer转base64

const base64 = btoa(String.fromCharCode.apply(null, new Uint8Array(arrayBuffer)));

base64转file

const base64ConvertFile = function (urlData, filename) { // 64转file
    if (typeof urlData != 'string') {
        return;
    }
    let arr = urlData.split(',')
    let type = arr[0].match(/:(.*?);/)[1]
    let fileExt = type.split('/')[1]
    let bstr = atob(arr[1])
    let n = bstr.length
    let u8arr = new Uint8Array(n)
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], 'filename.' + fileExt, {
        type: type
    });
}

温馨提示:由于文章篇幅有限,关于几种二进制的详细用法可以去MDN查看。

以上就是js二进制数据及其互相转化实现详解的详细内容,更多关于js二进制数据互相转化的资料请关注脚本之家其它相关文章!

相关文章

  • 微信小程序 scroll-view组件实现列表页实例代码

    微信小程序 scroll-view组件实现列表页实例代码

    这篇文章主要介绍了微信小程序 scroll-view组件实现列表页实例代码的相关资料,scroll-view组件介绍scroll-view是微信小程序提供的可滚动视图组件,其主要作用是可以用来做手机端经常会看到的上拉加载 ,需要的朋友可以参考下
    2016-12-12
  • 详解微信小程序 template添加绑定事件

    详解微信小程序 template添加绑定事件

    这篇文章主要介绍了详解微信小程序 template添加绑定事件的相关资料,需要的朋友可以参考下
    2017-06-06
  • JavaScript中的宏任务和微任务详情

    JavaScript中的宏任务和微任务详情

    这篇文章主要介绍了JavaScript中的宏任务和微任务,下面文章围绕JavaScript宏任务和微任务相关资料展开详细内容,需要的朋友可以参考一下,希望对大家有所帮助
    2021-11-11
  • 微信小程序 五星评价功能的实现

    微信小程序 五星评价功能的实现

    这篇文章主要介绍了微信小程序 五星评价功能的实现的相关资料,这里附有实例代码及实现效果图,需要的朋友可以参考下
    2017-03-03
  • JavaScript 定时器详情

    JavaScript 定时器详情

    这篇文章主要介绍了JavaScript 定时器,在JavaScript中定时器有两个 setInterval() 与 setTimeout() 分别还有取消定时器的方法,下面来看看文章的详细介绍
    2021-11-11
  • JS中自定义事件与观察者模式详解

    JS中自定义事件与观察者模式详解

    这篇文章主要为大家介绍了JS中自定义事件与观察者模式的示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06
  • 微信小程序 modal组件详细介绍

    微信小程序 modal组件详细介绍

    这篇文章主要介绍了微信小程序 modal组件详细介绍的相关资料,需要的朋友可以参考下
    2016-09-09
  • 一款功能强大的markdown编辑器tui.editor使用示例详解

    一款功能强大的markdown编辑器tui.editor使用示例详解

    这篇文章主要为大家介绍了一款功能强大的markdown编辑器tui.editor使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • 浅谈js中的宏任务和微任务

    浅谈js中的宏任务和微任务

    这篇文章我们主要谈一谈js中的宏任务和微任务,JavaScript是一门单线程语言,即一次只能完成一个任务,若有多个任务要执行,则必须排队按照队列来执行,下面我们就来简单谈谈JavaScript吧,需要的朋友可以参考下面文章内容的具体内容
    2021-09-09
  • 微信小程序 require机制详解及实例代码

    微信小程序 require机制详解及实例代码

    这篇文章主要介绍了微信小程序 require机制详解及实例代码的相关资料,需要的朋友可以参考下
    2016-12-12

最新评论