前端使用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. Java基础之集合框架类及泛型简介

    Collection接口 Collection 通用的常见方法 add()添加一个元素,可以指定脚标 addAll()将一个collection放入 clear()清除 remove()删除元素,返回 ...

  2. 双向循环链表（C语言描述）（五）

    代码清单 // dictionary.h #ifndef __DICTIONARY_H__ #define __DICTIONARY_H__ #include <assert.h> #in ...

  3. [js高手之路]es6系列教程 - 解构详解

    解构通俗点说,就是通过一种特定格式,快捷的读取对象/数组中的数据的方法, es6之前,我们通过对象名称[键] 读取数据 var User = { 'name' : 'ghostwu', 'age' : ...

  4. 超超超简单的bfs——POJ-1915

    Knight Moves Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 26102   Accepted: 12305 De ...

  5. javascript事件循环机制 浅尝手记

    引入 众所周知Javascript是一个单线程的机制,虽然可以依托多线程的浏览器实现页面如何实现页面复杂的渲染.事件响应,但仍不会改变其单线程的本质:所以对于js的事件循环机制的了解是一个前端人员的必 ...

  6. Windows下搭建Git 服务器: BONOBO GIT SERVER + TortoiseGit

    本文将介绍如何在Windows操作系统下搭建Git服务器和客户端.服务器端采用的是Bonobo Git Server,一款用ASP.NET MVC开发的Git源代码管理工具,界面简洁,基于Web方式配 ...

  7. HDU 5067 Harry And Dig Machine：TSP（旅行商）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5067 题意: 给你一个n*m的地图,地图上标着对应位置的石子数.你从左上角出发,每次可以向上下左右四个 ...

  8. owncloud存储云服务搭建

    owncloud是一款开源的存储云,用php写的,其作用可以像百度网盘那样存放文件到这个云当中, 只要能连上网,手机,平板,电脑都可以从中下载或者上传文件,用起来非常还不错,部署的过程也很简单,废话不 ...

  9. PL/SQL 编程（三 ）程序包和包体，触发器，视图，索引

    一.程序包和包体 程序包(package):存储在数据库中的一组子程序.变量定义.在包中的子程序可以被其它程序包或子程序调用.但如果声明的是局部子程序,则只能在定义该局部子程序的块中调用该局部子程序. ...

  10. MySQL视图了解

    视图是什么 视图是一种虚拟存在的表,不会在数据库中实际存在.相比较普通的表,有如下优势 简单:使用视图的用户完全不需要关心后面对应的表的结构.关联条件和筛选条件,对用户来说已经是过滤好的复合条件的结果 ...