html5中二进制对象Blob的使用——Blob与ArrayBuffer、TypeArray和String的相互转换

更新日期: 2018-03-27阅读: 7.1k标签: blob

html5中Blob是什么?

在计算机中,Blob常常是数据库中用来存储二进制文件的字段类型,MySQL中的Blob类型就只是个二进制数据容器。

在HTML5中,Blob是一种JavaScript的对象类型,Blob对象除了存放二进制数据外还可以设置这个数据的MIME类型,这相当于对文件的存储。一个Blob对象是一个包含只读原始数据的类文件对象。


创建Blob对象: 

在新的方法中可以直接通过Blob()构造函数来创建Blob对象。构造函数 接收两个参数:

(1)一个数据序列,可以是任何格式的值,例如,任意数量的字符串,Blobs以及ArrayBuffers。
(2)一个包含了两个属性的对象,其两个属性分别是:
        1)type:MIME类型。Blob.type是一个只读字符串,表明该Blob对象所包含数据的MIME类型,如果该类型未知,则该值为空字符串。
        2)endings:决定append()的数据格式。


String转换成Blob对象

//将字符串 转换成 Blob 对象
var blob = new Blob(["Hello World!"], {
    type: 'text/plain'
});
console.info(blob);
console.info(blob.slice(1, 3, 'text/plain'));


TypeArray转换成 Blob对象  

//将 TypeArray  转换成 Blob 对象
var array = new Uint16Array([97, 32, 72, 101, 108, 108, 111, 32, 119, 111, 114, 108, 100, 33]);
//测试成功
//var blob = new Blob([array], { type: "application/octet-binary" });
//测试成功, 注意必须[]的包裹
var blob = new Blob([array]);
//将 Blob对象 读成字符串
var reader = new FileReader();
reader.readAsText(blob, 'utf-8');
reader.onload = function (e) {
    console.info(reader.result); //a Hello world!
}


ArrayBuffer转Blob

var buffer = new ArrayBuffer(32);
var blob = new Blob([buffer]);       // 注意必须包裹[]


将Blob对象转换成String字符串,使用FileReader的readAsText方法 

//将字符串转换成 Blob对象
var blob = new Blob(['中文字符串'], {
    type: 'text/plain'
});
//将Blob 对象转换成字符串
var reader = new FileReader();
reader.readAsText(blob, 'utf-8');
reader.onload = function (e) {
    console.info(reader.result);
}


将Blob对象转换成ArrayBuffer,使用FileReader的 readAsArrayBuffer方法  

//将字符串转换成 Blob对象
var blob = new Blob(['中文字符串'], {
    type: 'text/plain'
});
//将Blob 对象转换成 ArrayBuffer
var reader = new FileReader();
reader.readAsArrayBuffer(blob);
reader.onload = function (e) {
    console.info(reader.result); //ArrayBuffer {}
    //经常会遇到的异常 Uncaught RangeError: byte length of Int16Array should be a multiple of 2
    //var buf = new int16array(reader.result);
    //console.info(buf);

    //将 ArrayBufferView  转换成Blob
    var buf = new Uint8Array(reader.result);
    console.info(buf); //[228, 184, 173, 230, 150, 135, 229, 173, 151, 231, 172, 166, 228, 184, 178]
    reader.readAsText(new Blob([buf]), 'utf-8');
    reader.onload = function () {
        console.info(reader.result); //中文字符串
    };

    //将 ArrayBufferView  转换成Blob
    var buf = new DataView(reader.result);
    console.info(buf); //DataView {}
    reader.readAsText(new Blob([buf]), 'utf-8');
    reader.onload = function () {
        console.info(reader.result); //中文字符串
    };
}

示例来源参考:https://www.cnblogs.com/tianma3798/p/5834598.html


链接: https://www.fly63.com/article/detial/553

原生JS上传图片接收服务器端图片并且显示图片(主要描述blob类型)

图片以独立文件的形式存储在服务器的指定文件夹中,再将路径存入数据库字段中;将图片转换成blob,直接存储到数据库的 Image 类型字段中(这种方式负担很大不建议使用)

前端js实现Blob、DataURL、canvas、image的相互转换

canvas转dataURL:canvas对象、转换格式、图像品质;DataURL转canvas;image转canvas:图片地址;dataURL转image,这个不需要转,直接给了src就能用

js blob流和base64,以及file和base64的相互转换

file文件转换为base64,得到base64格式图片;base64转换为file;base64转换为blob流;blob流转换为base64;测试案例,可直接复制运行

通过Blob实现文件下载

最近遇到一个需求,需要将页面中的配置信息下载下来供用户方便使用,以前这个场景的需求有时候会放到后端处理,然后给返回一个下载链接。其实并不需要这么麻烦,这样既增大了服务器的负载

ArrayBuffer 和 Blob 对象

ArrayBuffer 对象与 Blob 对象大家或许不太陌生,常见于文件上传操作处理(如处理图片上传预览等问题)。那么本文将与大家深入介绍两者。ArrayBuffer 对象是 ES6 才纳入正式 ECMAScript 规范

你不知道的 Blob

Blob(Binary Large Object)表示二进制类型的大对象。在数据库管理系统中,将二进制数据存储为一个单一个体的集合。Blob 通常是影像、声音或多媒体文件。在 JavaScript 中 Blob 类型的对象表示不可变的类似文件对象的原始数据

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!