前端使用TypedArray编辑二进制

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

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

　　如何使用ArrayBuffer：

　　new ArrayBuffer(32)， 从内存中申请32个字节；

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

var ab = new ArrayBuffer()

var iA = new Int8Array(ab)

iA[] = ;//把二进制的数据的首位改为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[];

            console.log(file instanceof Blob)

        }

    </script>

</body>

</html>

　　FileReader读区blob文件

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

var ab = new ArrayBuffer()

var iA = new Int8Array(ab)

iA[] =

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()

var iA = new Int8Array(ab)

iA[] =

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[].match(/:(.*?);/)[],

    bstr = atob(arr[]), 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

ArrayBuffer和TypedArray，以及Blob的使用的更多相关文章

  1. ArrayBuffer、TypedArray、DataView二进制数组

    三个是处理二进制数据的接口.都是类数组. 1.ArrayBuffer是什么? ArrayBuffer是一个二进制对象(文件,图片等).它指向固定长度的,连续的内存区域. const buffer = ...

  2. FormData、Blob、File、ArrayBuffer数据类型

    XMLHttpRequest 1.0 1.0 中xmlhttpRequest有2个重要的返回属性,reposeText,reposeXml.下面的数据类型都是2.0新增的 FormData对象 我们应 ...

  3. File、Blob、ArrayBuffer等文件类的对象有什么区别和联系

    前言 在前端中处理文件时会经常遇到File.Blob.ArrayBuffer以及相关的处理方法或方式如FileReader.FormData等等这些名词,对于这些常见而又不常见的名词,我相信大多数人对 ...

  4. ArrayBuffer对象、TypedArray视图和DataView视图

    转:http://es6.ruanyifeng.com/#docs/arraybuffer ArrayBuffer ArrayBuffer 对象 TypedArray 视图 复合视图 DataView ...

  5. 理解DOMSTRING、DOCUMENT、FORMDATA、BLOB、FILE、ARRAYBUFFER数据类型

    一.XMLHttpRequest 2.0的家臣们 我大学那会儿,一个称为Ajax的东西对前端行业造成了深远影响,不仅是JS语言,而包括前端地位.职位兴起以及工作分工等.抛开IE6浏览器不谈,其他浏览器 ...

  6. 聊聊JS的二进制家族：Blob、ArrayBuffer和Buffer

    事实上,前端很少涉及对二进制数据的处理,但即便如此,我们偶尔总能在角落里看见它们的身影. 今天我们就来聊一聊前端的二进制家族:Blob.ArrayBuffer和Buffer 概述 Blob: 前端的一 ...

  7. js实现图片的Blob base64 ArrayBuffer 的各种转换

    一.相关基础知识 构造函数 FileReader() 返回一个新构造的FileReader 事件处理 FileReader.onabort  处理abort事件.该事件在读取操作被中断时触发. Fil ...

  8. HTML5中的二进制大对象Blob（转）

    HTML5中的Blob对象和MYSQL中的BLOB类型在概念上是有点区别的.MYSQL中的BLOB类型就只是个二进制数据容器.而HTML5中的Blob对象除了存放二进制数据外还可以设置这个数据的MIN ...

  9. [转] Meida视频加密二-Blob对象

    2. blob 1 <video src="blob:http://www.bilibili.com/d0823f0f-2b2a-4fd6-a93a-e4c82173c107" ...

随机推荐

  1. python--代码统计（进阶版）

    在上一篇的随笔中发表了代码统计小程序,但是发表后,我发现,以前写的代码怎么办 写了那么多,怎么就从0开始了呢,,,,我还是个孩子啊,不能这么残忍 于是,代码统计进阶版:统计当前目录下所有指定文件类型的 ...

  2. .net操作IIS，新建网站，新建应用程序池，设置应用程序池版本，设置网站和应用程序池的关联

    ServerManager类用来操作IIS,提供了很多操作IIS的API.使用ServerManager必须引用Microsoft.Web.Administration.dll,具体路径为:%wind ...

  3. python进阶（4）：初始面向对象

    一切皆对象! 面向过程-->面向对象 面向过程:根据业务逻辑从上到下堆叠代码 函数式:将某功能代码封装到函数中,日后便无需重复编写,仅调用函数即可 面向对象:对函数进行分类和封装,让开发“更快更 ...

  4. Python爬虫从入门到放弃（二十三）之 Scrapy的中间件Downloader Middleware实现User-Agent随机切换

    总架构理解Middleware 通过scrapy官网最新的架构图来理解: 这个图较之前的图顺序更加清晰,从图中我们可以看出,在spiders和ENGINE提及ENGINE和DOWNLOADER之间都可 ...

  5. 小米wifi

    场景:把小米wifi插主机上,作为热点发射器:然后使用手机搜索到这个热点,建立wifi连接 驱动:当＂把小米wifi插主机上＂的时候,主机可能无法识别这个设备,所以需要前往官网下载驱动 下载地址:ht ...

  6. Qt 无边框拖拽实现

    Qt 无边框拖拽实现 头文件定义: class TDragProxy:public QObject { Q_OBJECT public: TDragProxy(QWidget* parent); ~T ...

  7. js调试的时候用console.log("变量"+scrollTop+windowHeight)

    console.log("变量"+scrollTop+windowHeight) alert会打断程序,但是console.log("变量"+scrollTop ...

  8. Ubuntu 如何安装Google Chrome浏览器

    1.上Chrome 官网下载http://www.google.cn/chrome/browser/desktop/ 2.保存下载文件到Home路径下(个人习惯) 3.按Ctrl+Alt +T 调出终 ...

  9. 利用angular打造管理系统页面

    1 创建一个新的angular应用 ng new adminSystem 2 利用WebStorm打开adminSystem应用 3 借助AdminLTE这个开源项目来辅助开发 AdminLTE项目: ...

  10. 大道至简第一章读后感——java伪代码形式

    大道至简这本书第一章在向读者展示编程的精义.开篇以愚公移山的例子来描述软件工程项目.愚公,作为一名工程名家,集项目组织者.团队经理.编程人员.技术分析师于一身,来领导工程的进行.下面我们来看看这个项目 ...