前端使用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. 起床困难综合症[NOI2014]

    [题解] 并不算很困难的贪心题.位运算毕竟是针对每一位的,从前向后处理,如果某一位1比0更优且可取1就使它为1.比较0和1的结果要单取这一位来看,但是题目中所给的参数并没有必要全部二进制分解,直接用十 ...

  2. 微信开发获取用户OpenID

    第一次开发微信版网页,对最重要的获取微信OpenId,特此记录下来 1.首先得有appid和appsecret . public class WeiXin { public static string ...

  3. 安徽省2016“京胜杯”程序设计大赛_E_转啊转

    转啊转 Time Limit: 1000 MS Memory Limit: 65536 KB Total Submissions: 59 Accepted: 15 Description     在二 ...

  4. B趣味求和

    编写一个程序,求Sn=a+aa+aaa+--+aa-aaa(有n个a)的值,其中a是一个数字. Input 输入数据含有不多于50组的数据,每组数据由两个正整数(0<a, n < 10)组 ...

  5. PHP部分问题的总结

    一.php连接sql sever 2005 中文编码转换问题. 这个问题是近期做Yii项目遇到的,而且php项目中用sql server做数据库,就是一个很坑的事,但没办法啊,客户是大爷,得听他的.( ...

  6. com.mysql.jdbc.exceptions.MySQLIntegrityConstraintViolationException: Column 'goodsName' cannot be null

    com.mysql.jdbc.exceptions.MySQLIntegrityConstraintViolationException: Column 'goodsName' cannot be n ...

  7. UIButton 中高亮取消

    1.图片 取消高亮方法 a.第一种方法 [withdrawalBtn setAdjustsImageWhenHighlighted:NO]; b.第二种方法 [withdrawalBtn setIma ...

  8. html2canvas页面截图图片不显示

    前两天在一个群里,有人问使用html2canvas屏幕截图的时候为什么页面的图片不显示只显示了文字,我没有做过屏幕截图的需求,所以不是很清楚,今天稍稍测试了一下. 在github上将html2canv ...

  9. 从SVN到Git最强指南

    对于软件开发人员来说,版本控制系统他们再熟悉不过了,所谓版本控制系统就是软件项目开发过程中用于储存开发人员所写代码所有修订版本的软件.它的主要目的是实现开发团队并行开发.提高开发效率,对软件开发进程中 ...

  10. JavaScript中的不同逻辑算法结合操作解决实际多重问题以及常用函数类型

    数组去重+快速排序 //老数组var arr1 = [1,2,2,3,8,6,6,4,5,5];//定义新数组var arr2 = [ ];内部可运用布尔型进行判断数组的唯一性 for(i=0;i&l ...