SYNCERのロゴ
アイキャッチ画像

Blob.slice() - 一部のデータを切り取る

slice()は、Blobのメソッドです。データの一部を切り取り、その部分を新たなBlobとして返します。

概要

名前
slice
所属
Blob
IDL
Blob slice([Clamp] optional long long start, [Clamp] optional long long end, optional DOMString contentType);
仕様書
https://w3c.github.io/FileAPI/#dfn-slice

説明

第1引数(start)には、切り取りを開始する位置を数値で指定します。

第2引数(end)には、切り取りを終了する位置を数値で指定します。

第3引数(contentType)には、返り値のBlobのmime typeを文字列で指定します。

開始位置、終了位置は、それぞれ正の数、または負の数で指定できます。区切り線を入れる位置でイメージして下さい。負の数の場合、-0は指定できません。最後まで切り取りたい場合は正の数で指定するか、または値を省略して下さい。

正の数の場合
正の数の場合
負の数の場合 (-0は指定不可)
負の数の場合 (-0は指定不可)

チュートリアル

メソッドを利用して、Blobの一部を切り取る例です。

// 元のBlob
var blob = new Blob( [ "SYNCER" ], { type: "text/plain" } ) ;

// メソッドを実行して新しいBlobを得る
var newBlob = blob.slice( 2, 4 ) ;
// 2 → 3Byte目(N)から切り取り開始
// 4 → 4Byte目(C)までで切り取り終了

// Blobの確認
var fileReader = new FileReader() ;

fileReader.onload = function () {
	console.log( this.result ) ;		// "NC"
}

fileReader.readAsText( newBlob ) ;

デモ

Blob.slice()のデモです。切り取り位置を変更してどのように反映されるか試してみて下さい。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
<style>
div#result { white-space: pre-wrap ; }
</style>
</head>
<body>
	<div id="result"></div>
<script>
var blob = new Blob( [ "SYNCER" ], { type: "text/plain" } ) ;
var newBlob = blob.slice( 2, 4 ) ;

var fileReader = new FileReader() ;

fileReader.onload = function () {
	console.log( this.result ) ;
	document.getElementById( "result" ).appendChild( new Text( this.result ) ) ;
}

fileReader.readAsText( newBlob ) ;
</script>
</body>
</html>

サポート状況

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
21+ 13+ 7.1+ 10+ 7.0+ 4.4+
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月4日 (水)
コンテンツを公開しました。