javaScript中Blob对象的学习笔记

Blob表示二进制原始数据,一个Blob对象就是一个包含有只读原始数据的类文件对象。

继承Blob功能的API有:

File对象:负责处理那些以文件形式存在的二进制数据,也就是操作本地文件;
FileList对象:File对象的网页表单接口;
FileReader对象:负责将二进制数据读入内存内容;
URL对象:用于对二进制数据生成URL。
一. 创建Blob对象的方法

创建Blob对象的方法有三种,如下:

1)可以调用Blob构造函数。
2)还可以使用一个已有Blob对象上的slice()方法切出另一个Blob对象。
3)还可以调用canvas对象上的toBlob()方法。
1.1 使用Blob构造函数创建:

Blob构造函数接受两个参数。第一个参数是一个包含实际数据的数组,第二个参数是数据的类型,这两个参数都不是必需的。

var myBlob = new Blob(["Hello World"], "text/xml");
1.2 使用slice()方法创建:

Blob对象的slice()方法,将二进制数据按照字节分块,返回一个新的Blob对象。

var newBlob = oldBlob.slice(startingByte, endindByte);
1.3 调用canvas对象上的toBlob()方法来创建:

语法:

void canvas.toBlob(callback, type, encoderOptions)
canvas.toBlob()方法的参数如下:

callback: 回调函数,可获得一个单独的Blob对象参数。
type: [可选] DOMString类型,指定图片格式,默认格式为image/png。
encoderOptions: [可选] Number类型,值在0与1之间,当请求图片格式为image/jpeg或者image/webp时用来指定图片展示质量。如果这个参数的值不在指定类型与范围之内,则使用默认值,其余参数将被忽略。
例子:

var canvas = document.getElementById("canvas");

canvas.toBlob(function(blob) {
  var newImg = document.createElement("img"),
      url = URL.createObjectURL(blob);

  newImg.onload = function() {
    // no longer need to read the blob so it's revoked
    URL.revokeObjectURL(url);
  };

  newImg.src = url;
  document.body.appendChild(newImg);
});
二. Blob对象的属性:

属性名 类型 描述
size Long Blob对象的字节长度。只读。
type DOMString Blob对象的MIME类型。如果是未知类型,则返回一个空字符串。只读。
三. Blob对象的方法:

slice():返回一个新的Blob对象,包含了源Blob对象中指定范围内的数据。

slice()方法的参数如下:

start [可选] 开始索引,可以为负数,语法类似于数组的slice方法。默认值为0。
end [可选] 结束索引,可以为负数,语法类似于数组的slice方法。默认值为最后一个索引。
contentType [可选] 新的Blob对象的MIME类型,这个值将会成为新的Blob对象的type属性的值,默认为一个空字符串。

时间: 2024-08-03 09:46:12

javaScript中Blob对象的学习笔记的相关文章

JavaScript中Window对象简明学习

1.Window对象是所有客户端JavaScript特性和API的主要接入点. Window对象中的一个重要属性是document,它引用Document对象.JavaScript程序可以通过Document对象和它包含的Element对象遍历和管理文档. 2.URL中的JavaScript 在URL后面跟一个JavaScript:协议限定符.里面的代码会作为JavaScript代码进行运行,需用分号分割.如: <a href="javascript:alert('OK!')"&

JavaScript中函数的参数学习笔记

 我们之前写的函数并没有给它传参,其实所谓的传参就是将参数传给函数,然后函数在内部做一些处理,那么如何给参数传参呢,其实函数后面的括号里面就是放参数的,下面举个例子:  代码如下 复制代码 function sum(a, b) {  alert(a+b); } sum(12, 5); 上面的函数中,给sum设置了2个参数a和b,当调用sum时,传递了2个参数给函数,这时a就变为了12,b就变为了5,函数体内的也要变.a和b就起到一个占位符的作用,就好像你和同学去食堂打饭,突然想到早上吃饭看见饭卡

JavaWeb中Session对象的学习笔记_java

一.Session简单介绍 在WEB开发中,服务器可以为每个用户浏览器创建一个会话对象(session对象),注意:一个浏览器独占一个session对象(默认情况下).因此,在需要保存用户数据时,服务器程序可以把用户数据写到用户浏览器独占的session中,当用户使用浏览器访问其它程序时,其它程序可以从用户的session中取出该用户的数据,为用户服务. 二.Session和Cookie的主要区别 Cookie是把用户的数据写给用户的浏览器.Session技术把用户的数据写到用户独占的sessi

JavaScript中封装class函数学习笔记

封装: 把相同功能的代码丢到一个函数中,重复调用.封装css函数 : 1,可以获取元素的样式 2,可以修改元素的样式.封装的过程是循环渐进的,一步一步的来.本节第一.二.三.五.六步公用CSS: #div1 { width: 100px; height: 150px; background: red;} 本节第一.二.三.五.六步公用HTML: <div id="div1" ></div> 封装第一步:JS:function a(idName){        

JavaScript中自定义事件的学习笔记

在web前端开发中,很多人可能不会用到js的自定义事件,但如果是做一个相对来说比较大的项目,尤其是多人协同开发的时候,自定义事件就显得很重要了.那么,什么是js中的自定义事件呢?我们先来看一个例子: 前端开发员A封装了一个函数:  代码如下 复制代码 function move(){     alert(a);  //以此来代表N行代码 } 过段时间,前端开发员B要在A的基础上丰富这个函数,于是,他会这样写:  代码如下 复制代码 function move(){     alert(a); 

Javascript中回调函数的学习笔记

回调函数原理: 我现在出发,到了通知你" 这是一个异步的流程,"我出发"这个过程中(函数执行),"你"可以去做任何事,"到了"(函数执行完毕)"通知你"(回调)进行之后的流程 例子  代码如下 复制代码 1.基本方法 <script language="javascript" type="text/javascript">   function doSomethin

重温JavaScript中的正则表达式 js学习笔记

一.创建正则表达式 创建正则表达式和创建字符串类似 , 创建正则表达式提供了两种方法 , 一种是采用 new运算符,另一个是采用字面量方式. 复制代码 代码如下: var dog = new RegExp('dog'); // 第一个参数字符串 var dog = new RegExp('dog', 'ig'); // 第二个参数可选模式修饰符 var dog = /dog/; var dog = /dog/ig; //字面量方式. RegExp 对象包含两个方法 : test() 和 exec

Javascript中switch case 语句学习笔记

在if条件语句中,逻辑条件只能有一个,如果有多个条件,可以使用嵌套的if语句来解决,但这种方法会增加程序的复杂度,降低程序的可读性. 使用switch流程控制语句可以完美地解决这些问题,其基本结构如下: switch语句语法  代码如下 复制代码 switch(条件表达式) {         case 常量:         {                 语句a;         }         case 常量:         {                 语句b;     

JavaScript中的对象、函数和继承

1. Javascript中的对象.JavaScript可以说是一个基于对象的编程语言,为什么说是基于对象而不是面向对象,因为JavaScript自身只实现了封装,而没有实现继承和多态.既然他是基于对象的,那么我们就来说说js中的对象. 1. Javascript中的对象 JavaScript可以说是一个基于对象的编程语言,为什么说是基于对象而不是面向对象,因为JavaScript自身只实现了封装,而没有实现继承和多态.既然他是基于对象的,那么我们就来说说js中的对象.有人说js中所有的都是对象