首页 > 其他分享 >文件数据转换

文件数据转换

时间:2023-02-19 20:35:56浏览次数:38  
标签:文件 const URL reader Blob new 转换 数据 blob

Blob URL (Object URL)

是前缀为 blob:的 URL, 用来表示关联的Blob对象,这个 URL 的生命周期和创建它的窗口的 document 绑定。

const blobUrl = URL.createObjectURL(blob);

可在浏览器地址栏、img标签srciframe标签srca标签href中使用,并展示相应的文件内容视图。常配合a标签download属性实现文件下载。

Base64

base64 是一种基于64个可打印字符来表示二进制数据的方法。

优点

  • 方便数据的传输和读写。

方法

  • atob: 解码一个 Base64 字符串。
  • btoa: 将一个字符串或者二进制数据编码一个 Base64 字符串。
 btoa("JavaScript")       // 'SmF2YVNjcmlwdA=='
 atob('SmF2YVNjcmlwdA==') // 'JavaScript'

Data URL

是前缀为 data:[MIME type];base64,的 URL, 将文件内容转换为 base64 字符串存储于 URL 中。

可在浏览器地址栏、img标签srciframe标签srca标签hrefcssbackground-image-url 中使用,并展示相应的文件内容视图。

缺点

  • base64编码的体积通常为原数据体积的4/3。
  • DataURL的图片不会被浏览器缓存,意味每次访问都被下载一次。
  • DataURL在渲染时比不使用多消耗53%左右的CPU资源,内存多出4倍左右,耗时平均高出24.6倍[^1]。

Image对象相关使用

const img = new Image()
img.src = blobURL | dataURL
img.onload = handleOnload

canvas相关方法

  • drawImage: 可传入 Image对象并绘制。
  • putImageData: 传入 ImageData对象并绘制。
  • getImageData: 图像数据化,返回ImageData对象。
  • toDataURL: 图像数据化,返回DataURL字符串。
  • toBlob: 图像数据化,返回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 → 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);
  });
}

Blob → Object URL

const objectUrl = URL.createObjectURL(blob);

Blob → File

const file = new File([blob], "filename.png", {type: "image/png",});

File → Blob

const blob = new Blob([file],{type:'image/png'})

标签:文件,const,URL,reader,Blob,new,转换,数据,blob
From: https://www.cnblogs.com/qingzhao/p/17135504.html

相关文章

  • 关于数据库事务隔离级别(Transaction)
    问题背景:最近在学习Spring的事务部分,其中涉及到了Spring事务属性的配置,其中一个isolation把我整懵逼了isolation设置事务的隔离级别DEFAULT:默认隔离级别,会采用......
  • 关于用户登录信息在数据库中的加密方法。
    1.首先我从网上查阅资料明白加密方法有很多种。有MD5加密还有就是Brcypt加密。本次我只要介绍md5加密的方法。首先我们可以直接从网上查找以下加密算法把他打包成一个类......
  • 数据泵批量导出导入非系统用户数据
    文档课题:数据泵批量导出导入非系统用户数据.1、导出1.1、字符集SYS@orcl>selectuserenv('language')fromdual;USERENV('LANGUAGE')-----------------------------------......
  • 数据结构面试题
    数据结构面试题1、栈(stack)栈(stack)是限制插入和删除只能在一个位置上进行的表,该位置是表的末端,叫做栈顶(top)。它是后进先出(LIFO)的。对栈的基本操作只有push(进栈)和pop(出......
  • 数据库引言
    一、数据库简介1.什么是数据库数据库其实是一种软件的概念,他是安装在我们操作系统之上,对数据进行操作的管理软件,称作(DBDataBase),用来存储和操作数据,我们常说的mysql,oracl......
  • Typecho——主题配置数据备份和恢复
    前言~cTypechoc~的配置项有个很神奇的特效,就是切换主题后,配置文件会丢失,但是EasyBe主题有很多配置,一旦丢失再重新配置会比较麻烦,所以特地给主题增加下保存配置文件的操......
  • Linux基础 - 服务管理 Unit配置文件
     一、配置文件的格式1.配置文件的区块名和字段名,都是大小写敏感的。2.每个区块内部是一些等号连接的键值对,键值对的等号两侧不能有空格。[root@cl-server~]#sys......
  • python中的数据模型
    参考:https://docs.python.org/zh-cn/3/reference/datamodel.html1. 对象、值与类型对象 是Python中对数据的抽象。Python程序中的所有数据都是由对象或对象间关系......
  • Exchanger多线程交换数据
    Exchanger用于两个线程之间(也可以多个线程)交换数据,交换器将自动匹配两个线程,将其数据互相传递.publicclassTest{publicstaticvoidmain(String[]args){......
  • 冷冻法快速还原Oracle数据库
    1、重新装完系统之后,把D:\app\Administrator\oradata拷贝出来,app目录。2、安装Oracle数据库,创建一个和oradata目录内同名的实例。3、通过停止服务的方式关闭数据库,冷拷贝......