前端使用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. dubbo源码分析（二）：超时原理以及应用场景

    dubbo超时原理以及应用场景 *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: ...

  2. css2--垂直对齐

    ## CSS2 vertical-align 垂直对齐     - baseline   默认值.基于基线对齐     - middle     位于同一行的非衬线字体小写字母的 1/2 处.不要为父 ...

  3. Mybatis源码分析-SqlSessionTemplate

    承接Mybatis源码解析-MapperRegistry注册mapper接口,本文将在前文基础上讲解持久层的生成 SqlSessionFactory生成 在spring中,SqlSessionFact ...

  4. Vue过渡效果之CSS过渡

    前面的话 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.本文将从CSS过渡transition.CSS动画animation及配合使用第三方CSS动画库(如animate. ...

  5. 常见C++面试题及基本知识点总结（一）

    [转载请注明出处]:http://www.cnblogs.com/LUO77/p/5771237.html  1. 结构体和共同体的区别. 定义: 结构体struct:把不同类型的数据组合成一个整体, ...

  6. MYSQL updatexml报错注入

    首先了解下updatexml()函数 UPDATEXML (XML_document, XPath_string, new_value); 第一个参数:XML_document是String格式,为X ...

  7. class类的初始化

    class类的初始化 C++中引入了构造器这个概念(constructor)的概念,这是在创建一个对象时被自动调用的特殊方法.  Java也引入了构造器  构造器的主要的作用就是确保每个对象都会得到初 ...

  8. JavaWeb（三）servlet

    Servlet * 什么是Servlet 是运行在web服务器端的Java应用程序,它使用JAVA语言编写,具有Java语言的优点.与Java程序的区别:Servlet对象主要封装了对Http请求的处 ...

  9. nmon 使用

    官网:http://nmon.sourceforge.net/pmwiki.php 步骤 1. 下载nmon到linux上: 2. 解压tar包,根据使用的linux版本选择使用的文件,并对其加上使用 ...

  10. 【Ubuntu Desktop】VMware 中 Unknown Display

    由于之前重复的安装卸载Unity桌面,今天遇到了在设置虚拟机分辨率的时候,遇到了Unknown Display问题 参考网上内容 使用 xrandr调节分辨率 xrandr只能在虚拟机本地终端执行,不 ...