ArrayBuffer和TypedArray,以及Blob的使用

  前端使用TypedArray编辑二进制

  ES6提供了, ArrayBuffer和TypedArray, 让前端也可以直接操作编辑二进制数据, 网页中的类型为file的input标签, 也可以通过FileReader转化为二进制, 然后再做编辑等, 本文提供参考;

  ArrayBuffer : 代表内存之中的一段二进制数据, 通过它我们可以直接创建二进制对象,然后使用相关的方法和属性。

  如何使用ArrayBuffer:

  new ArrayBuffer(32), 从内存中申请32个字节;

  把ArrayBuffer转换为可以编辑的TypedArray, 然后修改typedArray的内容, 接着再把二进制的数据转化为blob类型的数据,再把blob对象转化为一个url数据, 接着就可以把blob文件下载下来:

var ab = new ArrayBuffer(32)
var iA = new Int8Array(ab)
iA[0] = 97;//把二进制的数据的首位改为97 ,97为小写字母a的ascll码;
var blob = new Blob([iA], {type: "application/octet-binary"});//把二进制的码转化为blob类型
var url = URL.createObjectURL(blob);
window.open(url)

  网站上类型为file的input如果选择了文件, 那么input的value其实就继承了Blob数据,测试demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="file" id="f">
    <script>
        var eF = document.getElementById("f");
        eF.onchange = function() {
            var file = eF.files[0];
            console.log(file instanceof Blob)
        }
    </script>
</body>
</html>

  FileReader读区blob文件

  我们也可以使用FileReader读取blob数据,并打印出来:

var ab = new ArrayBuffer(32)
var iA = new Int8Array(ab)
iA[0] = 97
var blob = new Blob([iA], {type: "application/octet-binary"});
var fr = new FileReader();
fr.addEventListener("load", function(ev) {
    console.log(ev.target.result);//会输出字符:a
});
fr.readAsText(blob)

  blob转化为typedArray

  如果要把blob文件转化为二进制的数据的话,要先把blob转化为arraybuffer,然后再使用typedArray就可以直接编辑二进制数据了:

var ab = new ArrayBuffer(32)
var iA = new Int8Array(ab)
iA[0] = 97
var blob = new Blob([iA], {type: "application/octet-binary"});
var fr = new FileReader();
fr.addEventListener("load", function(ev) {
    var abb = ev.target.result;
    var iAA = new Int8Array(abb);
    console.log(iAA);
});
//把blob文件转化为arraybuffer;
fr.readAsArrayBuffer(blob)

  arraybuffer -->> typedarray -->> blob -->> blob通过FileReader转化为 arraybuffer或者text文本或者base64字符串;

  arraybuffer和typedarray主要是处理二进制, 如果要把blob往二进制转换, 必须先把blob转换为arraybuffer, 然后再转换为可以编辑的typedArray;

  实际上, 还有一种比较常用的数据类型, base64编码的数据, 常用的比如image的base64的编码, 文本的base64编码等, 也可以把base64的编码转化为对应的ascll码,再转化为typearray ,然后再生成blob对象:

function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(‘,‘), mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    //通过atob把base64转化为ascll码, 然后再把ascll码转化为字节码
    while(n--){
      u8arr[n] = bstr.charCodeAt(n);
    }  //u8arr就是2进制的数据
  return new Blob([u8arr], {type:mime});
} 

  

参考:

  Blob:https://developer.mozilla.org/zh-CN/docs/Web/API/Blob

  TypeArray:https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/TypedArray

  ruanyifeng:http://es6.ruanyifeng.com/#docs/arraybuffer

  typedArrays:https://www.html5rocks.com/en/tutorials/webgl/typed_arrays/

  base64:https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding

  base64字节码原理:http://www.cnblogs.com/chengxiaohui/articles/3951129.html

作者: NONO
出处:http://www.cnblogs.com/diligenceday/

企业网站:http://www.idrwl.com/
开源博客:http://www.github.com/sqqihao
QQ:287101329

微信:18101055830

时间: 2024-12-06 08:18:33

ArrayBuffer和TypedArray,以及Blob的使用的相关文章

ArrayBuffer、TypedArray、DataView二进制数组

三个是处理二进制数据的接口.都是类数组. 1.ArrayBuffer是什么? ArrayBuffer是一个二进制对象(文件,图片等).它指向固定长度的,连续的内存区域. const buffer = new ArrayBuffer(16); // buffer.byteLength === 16 生成16位字节的二进制数据,每一位都默认是0 上面分配了一个长度为16个字节的内存区域,代表16byte的二进制数据.并且默认每bit内容都是0. 1.特点 1)和数组不同,它创建后长度就固定了,不能增

聊聊JS的二进制家族:Blob、ArrayBuffer和Buffer

事实上,前端很少涉及对二进制数据的处理,但即便如此,我们偶尔总能在角落里看见它们的身影. 今天我们就来聊一聊前端的二进制家族:Blob.ArrayBuffer和Buffer 概述 Blob: 前端的一个专门用于支持文件操作的二进制对象 ArrayBuffer:前端的一个通用的二进制缓冲区,类似数组,但在API和特性上却有诸多不同 Buffer:Node.js提供的一个二进制缓冲区,常用来处理I/O操作 Blob 我们首先来介绍Blob,Blob是用来支持文件操作的.简单的说:在JS中,有两个构造

HTML5中的二进制大对象Blob(转)

HTML5中的Blob对象和MYSQL中的BLOB类型在概念上是有点区别的.MYSQL中的BLOB类型就只是个二进制数据容器.而HTML5中的Blob对象除了存放二进制数据外还可以设置这个数据的MINE类型,这相当于对文件的储存,其它很多二进制对象也是从这个对象继承的. 一个Blob对象就是一个包含有只读原始数据的类文件对象.Blob对象中的数据并不一定得是JavaScript中的原生形式.File接口基于Blob,继承了Blob的功能,并且扩展支持了用户计算机上的本地文件. 创建Blob对象的

HTML5 FileReader读取Blob对象API详解

使用FileReader对象,web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容,可以使用File对象或者Blob对象来指定所要读取的文件或数据.其中File对象可以是来自用户在一个<input>元素上选择文件后返回的FileList对象,也可以来自由拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后的返回结果. 创建FileReader对象, var reader = new F

Blob初探

简介 Blob在js中意味着二进制大数据.实现该接口的对象有3个属性,分别是type(MIME),size(byte)和 一个切割方法:slice(在大文件分片上传可能用到).另外,File实现了Blob接口,并且还有额外的属性--name和 lastModify. 早起的一些浏览器实现了草案(已废弃)上的BlobBuilder,但是现在的大多浏览器废弃了该对象.目前,创建新的 Blob对象需要使用Blob构造函数,new Blob(array,type).第一个参数数组中可以包含字符串,Arr

Buffer.from(arrayBuffer[, byteOffset[, length]])

arrayBuffer - 一个 TypedArray 或 new ArrayBuffer() 的 .buffer 属性 byteOffset {Number} 默认:0 length {Number} 默认:arrayBuffer.length - byteOffset 当传递的是 TypedArray 实例的 .buffer 引用时,这个新建的 Buffer 将像 TypedArray 那样共享相同的内存分配. const arr = new Uint16Array(2); arr[0] =

Blob文件处理

Blob对象简要介绍 Blob 对象表示一个不可变.原始数据的类文件对象.Blob 表示的不一定是JavaScript原生格式的数据.File 接口基于Blob,继承了 Blob 的功能并将其扩展使其支持用户系统上的文件. 语法 const aBlob = new Blob( array, options ); 参数说明 array 是一个由ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象构成的 Array ,或者其他类似对象的混合体,它将会被放

c#后端返回文件的二进制数据,前端直接生成blob对象创建的文件是错误的!

本文只是记录实现过程中,所遇到的问题,等下次再遇到时,能够轻松解决. 这是后端的返回结果,文件的二进制数组在data里. 刚开始我的js代码是这样写的 let url = window.URL.createObjectURL(new Blob([res.data], { type: "application/vnd.ms-excel" })); result += "," + "<a download='错误信息.xlsx' href='"

那些前端二进制操作API

一直以来,前端的工作主要涉及的是字符串操作,而对二进制的数据接触较少.但是这种需求却一直存在着,尤其是HTML5之后,随着web应用越来越复杂,File,Blob,TypedArray这些API的出现使得前端对二进制的操作更加方便. atob,btoa 这两个函数的应用场景之一是解密大佬留下的微信号??,函数名中的a,b分别代表 ASCII 和 binary string.谈到这两个函数就不得不提到base64.Base64就是一种基于64个可打印字符来表示二进制数据的方法.Base64 enc