您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)HTML5中的Blob對(duì)象的使用方法,文章內(nèi)容質(zhì)量較高,因此小編分享給大家做個(gè)參考,希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。
HTML5中的Blob對(duì)象和MYSQL中的BLOB類型在概念上是有點(diǎn)區(qū)別的。MYSQL中的BLOB類型就只是個(gè)二進(jìn)制數(shù)據(jù)容器。而HTML5中的Blob對(duì)象除了存放二進(jìn)制數(shù)據(jù)外還可以設(shè)置這個(gè)數(shù)據(jù)的MINE類型,這相當(dāng)于對(duì)文件的儲(chǔ)存,其它很多二進(jìn)制對(duì)象也是從這個(gè)對(duì)象繼承的。
在稍低版本的現(xiàn)代瀏覽器中,這個(gè)Blob對(duì)象還沒規(guī)范化,因此需要BlobBuilder之類的方式來創(chuàng)建。但是現(xiàn)在Blob已經(jīng)規(guī)范到可以直接new它的構(gòu)造器Blob來創(chuàng)建了,而且瀏覽器幾乎都已經(jīng)支持了這個(gè)方式,所以對(duì)于舊標(biāo)準(zhǔn)咱就沒必要糾結(jié)了。
CSS Code復(fù)制內(nèi)容到剪貼板
var data='<b style="font-size:32px;color:red;">次碳酸鈷</b>'; var blob=new Blob([data],{"type":"text/html"}); console.log(blob);
這樣我們就創(chuàng)建了一個(gè)Blob對(duì)象,注意Blob這個(gè)構(gòu)造器的參數(shù)比較詭異,第一個(gè)參數(shù)是一組數(shù)據(jù),所以必須是數(shù)組,即使像上面的例子一樣只有一個(gè)字符串也必須用數(shù)組裝起來。第二個(gè)參數(shù)是對(duì)這一Blob對(duì)象的配置屬性,目前也只有一個(gè)type也就是相關(guān)的MIME需要設(shè)置,使用key-value的方式也許是為了今后的擴(kuò)展。
那么,把數(shù)據(jù)做成Blob有什么用呢?對(duì)于Blob對(duì)象,我們可以創(chuàng)建出一個(gè)URL來訪問它。使用URL對(duì)象的createObjectURL方法。
CSS Code復(fù)制內(nèi)容到剪貼板
var data='<b style="font-size:32px;color:red;">次碳酸鈷</b>'; var blob=new Blob([data],{"type":"text/html"}); onload=function(){ var iframe=document.createElement("iframe"); iframe.src=URL.createObjectURL(blob); document.body.appendChild(iframe); };
不僅是上面例子中的text/html,任何瀏覽器支持的類型都可以這么用。而且這個(gè)Blob-URL的生存周期是從創(chuàng)建到文檔釋放,不會(huì)造成資源的浪費(fèi)。
Blob是一個(gè)HTML5中很基本的二進(jìn)制數(shù)據(jù)對(duì)象,很多方法的操作參數(shù)都支持使用Blob,這個(gè)我一下也列舉不出??傊?,幾乎所有參數(shù)類型是二進(jìn)制數(shù)據(jù)的方法都支持使用Blob作為參數(shù)就對(duì)了。所以把數(shù)據(jù)做成Blob可以讓之后的一些列操作變得更方便。
方法
slice()
返回一個(gè)新的Blob對(duì)象,包含了源Blob對(duì)象中指定范圍內(nèi)的數(shù)據(jù).
CSS Code復(fù)制內(nèi)容到剪貼板
Blob slice( optional long long start, optional long long end, optional DOMString contentType };
參數(shù)
start 可選
開始索引,可以為負(fù)數(shù),語(yǔ)法類似于數(shù)組的slice方法.默認(rèn)值為0.
end 可選
結(jié)束索引,可以為負(fù)數(shù),語(yǔ)法類似于數(shù)組的slice方法.默認(rèn)值為最后一個(gè)索引.
contentType 可選
新的Blob對(duì)象的MIME類型,這個(gè)值將會(huì)成為新的Blob對(duì)象的type屬性的值,默認(rèn)為一個(gè)空字符串.
返回值
一個(gè)新的Blob對(duì)象,包含了源Blob對(duì)象中指定范圍內(nèi)的數(shù)據(jù).
注意
如果start參數(shù)的值比源Blob對(duì)象的size屬性的值還大,則返回的Blob對(duì)象的size值為0,也就是不包含任何數(shù)據(jù).
BlobPropertyBag
一個(gè)包含有兩個(gè)屬性type和endings的對(duì)象.
type
設(shè)置該Blob對(duì)象的type屬性.
endings(已廢棄)
對(duì)應(yīng)于BlobBuilder.append()方法的endings參數(shù).該參數(shù)的值可以是"transparent"或者"native".
Blob構(gòu)造函數(shù)用法舉例
下面的代碼:
CSS Code復(fù)制內(nèi)容到剪貼板
var aFileParts = ["<a id=\"a\"><b id=\"b\">hey!<\/b><\/a>"]; var oMyBlob = new Blob(aFileParts, { "type" : "text\/xml" }); // the blob
等價(jià)于:
CSS Code復(fù)制內(nèi)容到剪貼板
var oBuilder = new BlobBuilder(); var aFileParts = ["<a id=\"a\"><b id=\"b\">hey!<\/b><\/a>"]; oBuilder.append(aFileParts[0]); var oMyBlob = oBuilder.getBlob("text\/xml"); // the blob
BlobBuilder接口提供了另外一種創(chuàng)建Blob對(duì)象的方式,但該方式現(xiàn)在已經(jīng)廢棄,所以不應(yīng)該再使用了.
例子:使用類型數(shù)組和Blob對(duì)象創(chuàng)建一個(gè)對(duì)象URL
CSS Code復(fù)制內(nèi)容到剪貼板
var typedArray = GetTheTypedArraySomehow(); var blob = new Blob([typedArray], {type: "application/octet-binary"}); // 傳入一個(gè)合適的MIME類型 var url = URL.createObjectURL(blob);
// 會(huì)產(chǎn)生一個(gè)類似blob:d3958f5c-0777-0845-9dcf-2cb28783acaf這樣的URL字符串
// 你可以像使用一個(gè)普通URL那樣使用它,比如用在img.src上.
關(guān)于HTML5中的Blob對(duì)象的使用方法就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。