格式转化以下是一些常用的基本转化:
1.Blob → ArrayBuffer
let blob = new Blob(['Hello,world'],{type: "text/plain"});let fileReader = new FileReader();fileReader.onload = function(event) {let result = event.target.result;console.log(result);// ArrayBuffer(11)};fileReader.readAsArrayBuffer(blob, 'UTF-8');2.Blob → (Base64 | DataURL)
let blob = new Blob(['Hello,world'],{type: "text/plain"});let fileReader = new FileReader();fileReader.onload = function(event) {let result = event.target.result;console.log(result);//data:text/plain;base64,SGVsbG8sd29ybGQ=let arr = result.split(','); let bstr = atob(arr[1])console.log(bstr)//Hello,world};fileReader.readAsDataURL(blob, 'UTF-8');注意:以上的编码依旧是不能支持所有Unicode编码方式 , 因为blob中的数据有可能是一些高码位的字符 , 那么readAsDataURL生成的dataurl有可能获取的是乱码 , 所以要给定blob生成时的字符编码方式 , 此时处理方式如下:
const blob = new Blob([''], { type: 'text/plain;charset=UTF-8' }); // Specify UTF-8 encoding in the Bloblet fileReader = new FileReader();fileReader.onload = function(event) {let result = event.target.result;console.log(result);//data:text/plain;charset=utf-8;base64,8KCcjg==let arr = result.split(','); let bstr = atob(arr[1]) // Convert binary string to UTF-8 stringconst decoder = new TextDecoder('utf-8');const utf8String = decoder.decode(new Uint8Array(bstr.length).map((_, i) => bstr.charCodeAt(i)));console.log(utf8String); // ""};fileReader.readAsDataURL(blob, 'UTF-8');在上述示例中 , 我们首先使用 atob() 函数将 Base64 编码的数据转换为二进制数据(二进制字符串) 。然后 , 我们使用 TextDecoder 对象将二进制数据转换回原始的 UTF-8 字符串 。
【浅谈JS处理文件数据的API:Blob、FileReader、Base64、File?】注意 , TextDecoder 构造函数的参数 'utf-8' 指定了使用 UTF-8 编码进行解码 。确保在解码时使用与编码时相同的字符编码 , 以便正确还原原始数据 。在我们之前的示例中 , 我们在创建 Data URL 时指定了 UTF-8 编码 , 因此在解码时也要使用 UTF-8 编码 。
3.Blob → Object URL
let blob = new Blob(['Hello,world']);const objectUrl = URL.createObjectURL(blob); 4.Blob → File
let blob = new Blob(['Hello,world']);let file = new File([blob], "blob", {type: 'text/plain'})// File{ name: "blob",size:11,type: "text/plain" ... }5.ArrayBuffer → Blob
const buffer = new ArrayBuffer(12);const s = new Uint8Array(buffer);let u = [72, 101, 108, 108, 111, 44, 32, 87, 111, 114, 108, 100];for (let i = 0; i < 12; i++) {s[i] = u[i]; }const blob = new Blob([s]);URL.createObjectURL(blob);// Hello, World6.ArrayBuffer → Base64
这里编码方式有两种 , 一种是可以通过btoa编码的 , 即是上文所说的限制 255 以内的字符 。另一种是兼容其他的Unicode码点的转换方式 。(以下是演示需要 , 实际使用不需要创建其他多余的数据)。
//(非高码位)const buffer = new ArrayBuffer(12);const s = new Uint8Array(buffer);let u = [72, 101, 108, 108, 111, 44, 32, 87, 111, 114, 108, 100];for (let i = 0; i < 12; i++) {s[i] = u[i];}const base64 = btoa(String.fromCodePoint.Apply(null,s));atob(base64)// 'Hello, World'// (高码位)const encoder = new TextEncoder();const buffer = encoder.encode("").buffer;// 这是在高码位的一个字符const s = new Uint8Array(buffer);// 演示需要 , 转成bufferconstdecoder = new TextDecoder();const str = decoder.decode(buffer);// console.log(str);// ""这里的输出就是 想要的字符 , 以下的操作是为了演示Unicode也可以编码 。// 编码let encode_str_unicode =btoa(encodeURIComponent(str));// 解码// let decode_str_unicode = decodeURIComponent(atob(encode_str_unicode));console.log(encode_str_unicode);//JUYwJUEwJTlDJThF这里的转换得到的高码位的编码结果// console.log(decode_str_unicode);// ""7. (Base64 | DataURL)→ Blob
const data_url ="data:text/plain;charset=utf-8;base64,8KCcjg=="; // 这里是dataurllet arr = data_url.split(','); let bstr = atob(arr[1])// 这里就是base64 // Convert binary string to UTF-8 stringconst decoder = new TextDecoder('utf-8');const utf8String = decoder.decode(new Uint8Array(bstr.length).map((_, i) => bstr.charCodeAt(i)));console.log(utf8String); // "”// 这里必须要给予charset 否则 createObjectURL生成的文本是乱码const blob = new Blob([utf8String], { type: 'text/plain;charset=UTF-8' });URL.createObjectURL(blob)// 这里访问即可得到字符
推荐阅读
- Rust中的高吞吐量流处理
- 解锁AI创新力:自然语言处理技术与应用
- 挖掘机陷泥怎么处理 挖掘机陷泥的施救方法
- 浅谈电池的百年发展史
- 电脑mp4格式视频打不开 视频文件打不开怎么办
- 自酿米酒长白毛可以吃吗 自酿米酒长白毛的原因及怎么处理
- 剩饭怎么处理好吃又营养 剩饭怎么处理好吃又营养呢
- 竹荪怎么处理才没有怪味儿 竹荪怎么处理才没有怪味
- 房间墙面发霉了怎么处理 家里发霉潮湿怎么处理
- 甲鱼咬到手指怎么处理 被甲鱼咬了需要打针吗
