What is a Blob?

A blob object represents a chuck of bytes that holds data of a file.

But a blob is not a reference to a actual file, it may seem like it is.

A blob has its size and MIME type just like a file has.

Blob data is stored in the memory or filesystem depending on the browser and blob size. A blob can be used like a file wherever we use files.

Most APIs for working with blobs are asynchronous. But synchronous versions of APIs are also available so that they can be used in Web Workers.

Content of a blob can be read as ArrayBuffer and therefore it makes blobs very handy to store binary data.

Creating a Blob

A blob can be created using Blob class.

//first arguement must be an regular array. The array can be of any javascript objects. Array can contain array to make it multi dimensional
//second parameter must be a BlogPropertyBag object containing MIME property
var myBlob = new Blob(["This is my blob content"], {type : "text/plain"});

In the above code we saw how we can insert data to a blob. We can read data from a blob using FileReader Class.

Example:

JS code:

//first arguement must be an regular array. The array can be of any javascript objects. Array can contain array to make it multi dimensional
//second parameter must be a BlogPropertyBag object containing MIME property
var myBlob = new Blob(["This is my blob content"], {type : "text/plain"});
var myReader = new FileReader();
//handler executed once reading(blob content referenced to a variable) from blob is finished.
myReader.addEventListener("loadend", function(e){
document.getElementById("paragraph").innerHTML = e.srcElement.result;//prints a string
});
//start the reading process.
myReader.readAsText(myBlob);

HTML code:

<p id="paragraph"></p>

result :This is my blob content

Blob URLs

As we have file:// URLs, referencing to a real file in local filesystem.

Similarly we have blob:// URLs referencing to an blob. blob:// URLs can be used almost wherever we use regular URLs.

A blob:// URL to a blob can be obtained using the createObjectURL object.

example:

JS code:

//cross browser
window.URL = window.URL || window.webkitURL; var blob = new Blob(['body { background-color: yellow; }'], {type: 'text/css'}); var link = document.createElement('link');
link.rel = 'stylesheet';
//createObjectURL returns a blob URL as a string.
link.href = window.URL.createObjectURL(blob);
document.body.appendChild(link);

the result is the document color is yellow.

revokeObjectURL(url : String) : return undefined

function is to frees the resources associated with the url created by createObjectURL().

Remote data as Blobs

We can retrieve remote files using AJAX and and store the file data inside a blob.

AJAX API provides us a method to download and store remote files in form of blobs.

example:

JS code:

var xhr = new XMLHttpRequest();
xhr.open("GET", "/favicon.png");
xhr.responseType = "blob";//force the HTTP response, response-type header to be blob
xhr.onload = function()
{
document.getElementsByTagName("body")[0].innerHTML = xhr.response;//xhr.response is now a blob object
}
xhr.send();

Result:[object Blob]

We can get the blob content in an ArrayBuffer and then analyze the ArrayBuffer as binary data. This can be done using FileReader.readAsArrayBuffer() method.

example:

JS code:

var xhr = new XMLHttpRequest();
xhr.open("GET", "/favicon.png");
//although we can get the remote data directly into an arraybuffer using the string "arraybuffer" assigned to responseType property.
//For the sake of example we are putting it into a blob and then copying the blob data into an arraybuffer.
xhr.responseType = "blob"; function analyze_data(blob)
{
var myReader = new FileReader();
myReader.readAsArrayBuffer(blob) myReader.addEventListener("loadend", function(e)
{
var buffer = e.srcElement.result;//arraybuffer object
});
} xhr.onload = function()
{
analyze_data(xhr.response);
}
xhr.send();

Conclusion

Blobs are very useful while working with binary remote files. A blob can be very large i.e., can contain audio and video data too. They can be created dynamically and using blob URLs they can be used as files. You can use them in many different ways to make them more useful. Thanks for reading.

Intro of BLOB

Blobs are immutable objects that represent raw data.

File is a derivation of Blob that represents data from the file system.

UseFileReader to read data from a Blob or File.

Blobs allow you to construct file like objects on the client that you can pass to apis that expect urls instead of requiring the server provides the file. For example, you can construct a blob containing the data for an image, use URL.createObjectURL() to generate a url, and pass that url to HTMLImageElement.src to display the image you created without talking to a server.

Constructors

new Blob(blobParts : Array, [blobPropertyBag : Object]) : Blob

blobPropertyBag : {
type String A valid mime type such as 'text/plain'
endings String Must be either 'transparent' or 'native'
}

Creates a new Blob. The elements of blobParts must be of the types ArrayBufferArrayBufferViewBlob, or String. If ending is set to'native', the line endings in the blob will be converted to the system line endings, such as '\r\n' for Windows or '\n' for Mac.

var blob = new Blob(['foo', 'bar']);

console.log('size=' + blob.size); // result is size=6
console.log('type=' + blob.type);//result is type= var testEndings = function(string, endings) {
var blob = new Blob([string], { type: 'plain/text',
endings: endings });
var reader = new FileReader();
reader.onload = function(event){
console.log(endings + ' of ' + JSON.stringify(string) +
' => ' + JSON.stringify(reader.result));
};
reader.readAsText(blob);
}; testEndings('foo\nbar', 'native');//result is native of "foo\nbar" => "foo\r\nbar"
testEndings('foo\r\nbar', 'native');//result is native of "foo\r\nbar" => "foo\r\nbar"
testEndings('foo\nbar', 'transparent');//result is transparent of "foo\nbar" => "foo\nbar"
testEndings('foo\r\nbar', 'transparent');//result is transparent of "foo\r\nbar" => "foo\r\nbar"

Instance Properties

 

size : Number  readonly

The size of the blob in bytes.

type : String  readonly

The type of the blob.

Instance Methods

 
 
slice([start = 0 : Number, [end : Number, [contentType = '' : String]]]) : Blob

Returns a new blob that contains the bytes start to end - 1 from this. If start or end is negative, the value is added to this.sizebefore performing the slice. If end is not specified, this.size is used. The returned blob's type will be contentType if specified, otherwise it will be ''.

var blob = new Blob(['foo', 'bar'], { type: 'plain/text',
endings: 'native' });
console.log('blob size:', blob.size); //result is blob size: 6
console.log('blob type:', blob.type);//result is blob type: plain/text var copy = blob.slice()
console.log('copy size:', copy.size);//result is copy size: 6
console.log('copy type:', copy.type);//result is copy type: var slice = blob.slice(1, 4, 'foo-type')
console.log('slice size:', slice.size);//resut is slice size: 3
console.log('slice type:', slice.type);//result is slice type: foo-type
 

BLOB二进制大数据的更多相关文章

  1. postgresql存储二进制大数据文件

    如果想把整个文件或图片存储在数据表的一个字段内,该字段可以选择二进制类型,然后将文件按二进制存储起来,文本文件也可以存在text字段内. 示例如下: 二进制类型bytea的操作(在最大值内,有内存限制 ...

  2. JDBC(5)-处理大数据

    大数据对象处理主要有CLOB(character large object) 和BLOB(binary large object) 两种类型的字段. 在CLOB中可以存储大字符对象,比如长篇小说:在B ...

  3. JavaWeb学习笔记(十四)—— 使用JDBC处理MySQL大数据

    一.什么是大数据 所谓大数据,就是大的字节数据,或大的字符数据.大数据也称之为LOB(Large Objects),LOB又分为:clob和blob,clob用于存储大文本,blob用于存储二进制数据 ...

  4. 处理大数据对象clob数据和blob数据

    直接上下代码: package com.learn.jdbc.chap06; import java.io.File; import java.io.FileInputStream; import j ...

  5. BLOB:大数据,大对象,在数据库中用来存储超长文本的数据,例如图片等

    将一张图片存储在mysql中,并读取出来(BLOB数据:插入BLOB类型的数据必须使用PreparedStatement,因为插入BLOB类型的数据无法使用字符串拼写): -------------- ...

  6. 在HDInsight中从Hadoop的兼容BLOB存储查询大数据的分析

    在HDInsight中从Hadoop的兼容BLOB存储查询大数据的分析 低成本的Blob存储是一个强大的.通用的Hadoop兼容Azure存储解决方式无缝集成HDInsight.通过Hadoop分布式 ...

  7. JDBC 复习3 存取Oracle大数据 clob blob

    1 目录结构记得导包咯 mysql oracle 2 代码,DBUtil工具类见前面的随笔博文 package dbex.mysql; import java.io.BufferedReader; i ...

  8. Java数据库——处理大数据对象

    处理大数据对象 CLOB中可以存储海量文字 BLOB中可以存储海量二进制数据 如果程序中要想处理这样的大对象操作,则必须使用PreparedStatement完成,所有的内容要通过IO流的方式从大文本 ...

  9. 使用JDBC处理MySQL大数据

    一.基本概念 大数据也称之为LOB(Large Objects),LOB又分为:clob和blob,clob用于存储大文本,blob用于存储二进制数据,例如图像.声音.二进制文等. 在实际开发中,有时 ...

随机推荐

  1. 分布式文件系统 FastDFS 5.0.8 & Linux CentOS 6.7 安装配置

    原文:http://blog.csdn.net/wlwlwlwl015/article/details/52619851 前言 项目中用到文件服务器,有朋友推荐用fastdfs,所以就了解学习了一番, ...

  2. Interface Builder中的技巧

    在我工作中经常会遇到有人吐槽Xcode中的interface builder(以下简称IB)不好用的开发者.在我看来,IB是一个非常棒的可视化开发工具,可以非常快捷的设置UI控件的大部分常用属性.下面 ...

  3. 八卦某 G 的前端开发方式及流程--百度FEX前端nwind信息搜集神技能

    他山之石,可以攻玉. 话说本人从毕业到现在一直在某 B 公司工作,前些年折腾过不少开发方式和工具,但总觉得或许有更好的方案,所以很好奇其它公司内部是如何工作的,我曾经浏览过某 Y 公司内部无所不包的 ...

  4. 【转载】面向切面编程(AOP)学习

    看到这篇文章,学习一下:http://www.ciaoshen.com/2016/10/28/aop/ 想理清一下从“动态代理”,到 “注释”,到“面向切面编程”这么一个技术演进的脉络. 只想讲清楚两 ...

  5. Maven - 下载JAR包

    进入Spring官网http://projects.spring.io/spring-framework/假设我们想下载Spring发现仅仅能 通过Maven或Cradle进行下载了. 以下以Spri ...

  6. mongodb3.0 性能測试报告 二

    mongodb3.0 性能測试报告 一 mongodb3.0 性能測试报告 二 mongodb3.0 性能測试报告 三 測试环境: 服务器:X86 pcserver   共6台 cpu:  单颗8核 ...

  7. C语言各种keyword

    1.register 在函数内定义变量时.默认是 auto 类型,变量存储在内存中,当程序用到该变量时,由控制器发出指令将内存中该变量的值送到运算器,计算结束后再从运算器将数据送到内存.假设一个变量用 ...

  8. kubernetes调度之资源配额

    系列目录 当多个用户或者开发团队共享一个有固定节点的的kubernetes集群时,一个团队或者一个用户使用的资源超过他应当使用的资源是需要关注的问题,资源配额是管理员用来解决这个问题的一个工具. 资源 ...

  9. 手机pc显示不同的内容

    <script type="text/javascript"> // var txt = $('#sjyincang').html(); // alert(txt); ...

  10. bb=Discuz与 Discuz! X ,Discuz!NT区别

    没加x的,仅仅是单独的论坛. 加了x的,模块加了很多了,门户,家园,排行榜,群组,都是Discuz! X上的,而Discuz!上没有,所以说Discuz! X更加适用于建设门户网 Discuz! X ...