Wednesday, 15 May, 2019 UTC
Summary
Javascript Blob Object Tutorial With Example | Blob Object Explained is today’s topic. The Blob object represents a file-like object of immutable, raw data. Blobs represent data that isn’t necessarily in a JavaScript-native format. The File interface is based on Blob, inheriting blob functionality and expanding it to support files on the user’s system.
Javascript Blob Object Tutorial
Blobs are immutable objects that represent raw data. The file is a derivation of Blob that represents data from the file system. Use FileReader 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.
We can construct Blob from other non-blob objects and data, use the Blob() constructor.
Blob Constructor
The Blob Constructor allows one to create blobs from other objects. For example, to construct a blob from a string.
For this example, we will not use the node.js because node.js does not have blob datatype. You can refer to this StackOverflow link.
Now, create an index.html file and add the following code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
let student = {name: 'Krunal'}
let blob = new Blob([JSON.stringify(student, null, 2)], { type: 'application/json' });
console.log(blob);
</script>
</body>
</html>
Now, go to the browser and run this file and you will see the following output in the browser console.
The Blob.size property returns the size in bytes of the Blob or a File.
Syntax
var sizeInBytes = blob.size
See the following example.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
let student = {name: 'Krunal'}
let blob = new Blob([JSON.stringify(student, null, 2)], { type: 'application/json' });
console.log(blob.size);
</script>
</body>
</html>
See the below output.
The Blob.slice() function is used to create the new Blob object containing a data in the specified range of bytes of the source Blob.
See the following syntax.
instanceOfBlob.slice([start [, end [, contentType]]]);
See the following code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
let student = {name: 'Krunal'}
let blob = new Blob([JSON.stringify(student, null, 2)], { type: 'application/json' });
console.log(blob.slice(10, 16, { type: 'application/json' }));
</script>
</body>
</html>
See the output.
Conclusively, Javascript Blob Object Tutorial With Example | Blob Object Explained article is over.
The post Javascript Blob Object Tutorial With Example | Blob Object Explained appeared first on AppDividend.