日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間:8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
HTML5中的Blob對象的使用方法

這篇文章將為大家詳細(xì)講解有關(guān)HTML5中的Blob對象的使用方法,文章內(nèi)容質(zhì)量較高,因此小編分享給大家做個參考,希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

創(chuàng)新互聯(lián)公司專注于網(wǎng)站建設(shè)|企業(yè)網(wǎng)站維護(hù)|優(yōu)化|托管以及網(wǎng)絡(luò)推廣,積累了大量的網(wǎng)站設(shè)計與制作經(jīng)驗,為許多企業(yè)提供了網(wǎng)站定制設(shè)計服務(wù),案例作品覆蓋樓梯護(hù)欄等行業(yè)。能根據(jù)企業(yè)所處的行業(yè)與銷售的產(chǎn)品,結(jié)合品牌形象的塑造,量身定制品質(zhì)網(wǎng)站。

HTML5中的Blob對象和MySQL中的BLOB類型在概念上是有點區(qū)別的。MYSQL中的BLOB類型就只是個二進(jìn)制數(shù)據(jù)容器。而HTML5中的Blob對象除了存放二進(jìn)制數(shù)據(jù)外還可以設(shè)置這個數(shù)據(jù)的MINE類型,這相當(dāng)于對文件的儲存,其它很多二進(jìn)制對象也是從這個對象繼承的。
在稍低版本的現(xiàn)代瀏覽器中,這個Blob對象還沒規(guī)范化,因此需要BlobBuilder之類的方式來創(chuàng)建。但是現(xiàn)在Blob已經(jīng)規(guī)范到可以直接new它的構(gòu)造器Blob來創(chuàng)建了,而且瀏覽器幾乎都已經(jīng)支持了這個方式,所以對于舊標(biāo)準(zhǔn)咱就沒必要糾結(jié)了。

CSS Code復(fù)制內(nèi)容到剪貼板

var data='次碳酸鈷';   
var blob=new Blob([data],{"type":"text/html"});   
console.log(blob);

HTML5中的Blob對象的使用方法

這樣我們就創(chuàng)建了一個Blob對象,注意Blob這個構(gòu)造器的參數(shù)比較詭異,第一個參數(shù)是一組數(shù)據(jù),所以必須是數(shù)組,即使像上面的例子一樣只有一個字符串也必須用數(shù)組裝起來。第二個參數(shù)是對這一Blob對象的配置屬性,目前也只有一個type也就是相關(guān)的MIME需要設(shè)置,使用key-value的方式也許是為了今后的擴(kuò)展。
那么,把數(shù)據(jù)做成Blob有什么用呢?對于Blob對象,我們可以創(chuàng)建出一個URL來訪問它。使用URL對象的createObjectURL方法。

CSS Code復(fù)制內(nèi)容到剪貼板

var data='次碳酸鈷';   
var blob=new Blob([data],{"type":"text/html"});   
onload=function(){   
  var iframe=document.createElement("iframe");   
  iframe.src=URL.createObjectURL(blob);   
  document.body.appendChild(iframe);   
};

HTML5中的Blob對象的使用方法

不僅是上面例子中的text/html,任何瀏覽器支持的類型都可以這么用。而且這個Blob-URL的生存周期是從創(chuàng)建到文檔釋放,不會造成資源的浪費。
Blob是一個HTML5中很基本的二進(jìn)制數(shù)據(jù)對象,很多方法的操作參數(shù)都支持使用Blob,這個我一下也列舉不出??傊瑤缀跛袇?shù)類型是二進(jìn)制數(shù)據(jù)的方法都支持使用Blob作為參數(shù)就對了。所以把數(shù)據(jù)做成Blob可以讓之后的一些列操作變得更方便。

方法

slice()

返回一個新的Blob對象,包含了源Blob對象中指定范圍內(nèi)的數(shù)據(jù).

CSS Code復(fù)制內(nèi)容到剪貼板

  1. Blob slice(   
      optional long long start,   
      optional long long end,   
      optional DOMString contentType   
    };

參數(shù)
start 可選
開始索引,可以為負(fù)數(shù),語法類似于數(shù)組的slice方法.默認(rèn)值為0.
end 可選
結(jié)束索引,可以為負(fù)數(shù),語法類似于數(shù)組的slice方法.默認(rèn)值為最后一個索引.
contentType 可選
新的Blob對象的MIME類型,這個值將會成為新的Blob對象的type屬性的值,默認(rèn)為一個空字符串.
返回值
一個新的Blob對象,包含了源Blob對象中指定范圍內(nèi)的數(shù)據(jù).
注意
如果start參數(shù)的值比源Blob對象的size屬性的值還大,則返回的Blob對象的size值為0,也就是不包含任何數(shù)據(jù).


BlobPropertyBag

一個包含有兩個屬性type和endings的對象.
type
設(shè)置該Blob對象的type屬性.
endings(已廢棄)
對應(yīng)于BlobBuilder.append()方法的endings參數(shù).該參數(shù)的值可以是"transparent"或者"native".
Blob構(gòu)造函數(shù)用法舉例

下面的代碼:

CSS Code復(fù)制內(nèi)容到剪貼板

var aFileParts = ["hey!<\/b><\/a>"];   
var oMyBlob = new Blob(aFileParts, { "type" : "text\/xml" }); // the blob

 
等價于:

CSS Code復(fù)制內(nèi)容到剪貼板

  1. var oBuilder = new BlobBuilder();   
    var aFileParts = ["hey!<\/b><\/a>"];   
    oBuilder.append(aFileParts[0]);   
    var oMyBlob = oBuilder.getBlob("text\/xml"); // the blob

 
BlobBuilder接口提供了另外一種創(chuàng)建Blob對象的方式,但該方式現(xiàn)在已經(jīng)廢棄,所以不應(yīng)該再使用了.

例子:使用類型數(shù)組和Blob對象創(chuàng)建一個對象URL

CSS Code復(fù)制內(nèi)容到剪貼板

var typedArray = GetTheTypedArraySomehow();   
var blob = new Blob([typedArray], {type: "application/octet-binary"}); // 傳入一個合適的MIME類型   
var url = URL.createObjectURL(blob);
  1. // 會產(chǎn)生一個類似blob:d3958f5c-0777-0845-9dcf-2cb28783acaf這樣的URL字符串   

  2. // 你可以像使用一個普通URL那樣使用它,比如用在img.src上.  

關(guān)于HTML5中的Blob對象的使用方法就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,可以學(xué)到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。


文章標(biāo)題:HTML5中的Blob對象的使用方法
當(dāng)前URL:http://www.dlmjj.cn/article/gespji.html