前端使用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. Android中的服务

    Android中的服务 四大组件都是运行在主线程 Android中的服务,是在后台运行 .可以理解成是在后台运行并且是没有界面的Activity. Foreground process 前台进程 ,用 ...

  2. 39. leetcode 326. Power of Three

    326. Power of Three Given an integer, write a function to determine if it is a power of three. Follo ...

  3. TCP/IP 主机路由表获取

    介绍在IP协议中主机的路由表获取方法: 主机初始化路由表: 直接相连路由:接口初始化时,自动获取直连主机和网络的路由信息 间接相连路由:通过执行route命令,手动初始化路由表 ICMP路由请求和通告 ...

  4. Android 原生 Intent 分享支持的那些事

    版权声明: 本账号发布文章均来自公众号,承香墨影(cxmyDev),版权归承香墨影所有. 每周会统一更新到这里,如果喜欢,可关注公众号获取最新文章. 未经允许,不得转载. 一.前言 对于一个 App ...

  5. NYOJ--139--我排第几个（康托展开）

    我排第几个 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述 现在有"abcdefghijkl"12个字符,将其所有的排列中按字典序排列,给出任意一 ...

  6. angular学习（一）-- Expression

    1.1 表达式:Expression 在AngularJS中,表达式是一种类似于模板引擎的语法, 可以在书写的位置 "输出" 数据. 基本使用 表达式写在双大括号内:{{ expr ...

  7. entos 7虚拟机安装手册

    entos 7虚拟机安装手册. 环境:VMware虚拟机软件 centos7 最小化安装包 步骤: 第一步:新建虚拟机 第二步:选择要安装的虚拟机的操作系统镜像.如我这里使用的就是CentOS7最小化 ...

  8. 前端应该知道的Web Components

    前端组件化的痛点 在前端组件化横行的今天,确实极大的提升了开发效率.不过有一个问题不得不被重视,拟引入的这些html.css.js代码有可能对你的其他代码造成影响. 虽然我们可以通过命名空间.闭包等一 ...

  9. Fedora25和win10双系统安装及使问题汇总

    安装问题汇总 1.U盘引导制作后,开机出现":Assuming driver cache: write through" 解决方案:经过排查后,怀疑是U盘启动制作出了问题,后来查阅 ...

  10. 【Centos】系统服务自启动配置

    Centos使用chkconfig命令来更新(启动或停止)和查询系统服务的运行级信息. 谨记chkconfig不是立即自动禁止或激活一个服务,它只是简单的改变了符号连接. 使用语法: chkconfi ...