집 > 기사 > 웹 프론트엔드 > js의 Blob 객체 유형에 대한 자세한 소개

js의 Blob 객체 유형에 대한 자세한 소개

王林앞으로: 2020-04-20 09:22:493380검색

Blob 개체를 구성하는 방법에는 일반적으로 세 가지가 있습니다.

1. Blob 개체의 생성자를 통해 구성합니다.

2. 슬라이스 인터페이스를 호출하여 기존 Blob 개체에서 새 Blob 개체를 잘라냅니다.

3. 캔버스 API toBlob 메서드는 현재 그리기 정보를 Blob 개체로 변환합니다. 첫 번째 구현을 살펴보겠습니다.

사용법: Blob 객체를 생성하는 새로운 메서드(생성자에 의해 생성됨)

var blob = new Blob(array[optional], options[optional]);

생성자, 두 개의 매개변수 허용

첫 번째 매개변수: 데이터 시퀀스이며 모든 형식 값이 가능합니다. , 예를 들어 임의 개수의 문자열, Blob 및 ArrayBuffer입니다.

두 번째 매개변수: Blob(MIME)에 배치할 데이터 유형을 지정하는 데 사용됩니다(백엔드는 MimeType을 열거하여 해당 유형을 얻을 수 있습니다:

MimeType mimeType = MimeType.toEnum(file.getContentType());）。

 <script>
 var blob = new Blob(["Hello World!"],{type:"text/plain"});
 </script>

Blob 개체의 기본 속성:

size: Blob 객체에 포함된 바이트 수입니다.

type: Blob 객체에 포함된 데이터 유형 MIME 유형을 알 수 없으면 빈 문자열이 반환됩니다. 오류:

<script type="text/javascript">
window.onload = function() {
 var blob = new Blob(1234);
}
</script>

이유는 Blob입니다. 생성자는 첫 번째 매개변수가 배열이어야 하며 여기서 첫 번째 매개변수는 배열도 아니고 색인화 가능한 속성도 아니기 때문에 여기에 언급되어 있습니다. 이것은 좋은 예입니다.

Uncaught TypeError: Failed to construct ‘Blob&#39;: The 1st argument is neither an array, nor does it have indexed properties.

배열과 유사한 객체이고 배열 요소 유형이 숫자인 경우에도 올바른 결론을 내릴 수 있음을 알 수 있습니다. 아마도 생성자가 내부적으로 Number를 String으로 변환하기 때문일 것입니다.

다른 매개변수 유형을 시도해 보겠습니다.

<script type="text/javascript">
function testArgumentsBlob() {
 var blob = new Blob(arguments);
 console.log(blob.size);//3
 console.log(blob.type);//""
}
window.onload = function() {
 testArgumentsBlob(1, 2, 3);
}
</script>

blob.type은 arg가 문자열로 변환된 후의 길이입니다. 16에 탭 문자 t의 너비를 더한 4바이트입니다.

Blob 객체의 기본 방법:

대형 파일 분할(slice() 방법), 슬라이스 방법은 Blob의 슬라이스와 유사합니다.

window.onload = function() {
 var arg = {hello: "2016"};
 var blob = new Blob([JSON.stringify(arg, null, "\t")], {type: "application/json"});
 console.log(blob.type);//application/json
 console.log(blob.size);//20
}

slice() 메서드는 시작 오프셋, 끝 오프셋 및 선택적 MIME 유형의 세 가지 매개변수를 허용합니다. MIME 유형이 설정되지 않은 경우 새 Blob 객체의 MIME 유형은 상위 객체와 동일합니다.

이 방법은 대용량 파일을 세그먼트로 분할하여 별도로 업로드하는 데 매우 유용합니다. 분할된 Blob 개체가 원본 개체와 독립적으로 존재하기 때문입니다.

그러나 브라우저에서는 이 방법을 통합적으로 구현하지 않습니다. mozSlice()를 사용하고 Chrome은 webkitSlice()를 사용하고, 다른 브라우저는 일반적인 방법인 Slice()를 사용합니다.

각 브라우저와 호환되는 방법을 작성할 수 있습니다:

Blob.slice([start, [end, [content-type]]])

Blob을 사용하여 축소판 그림을 표시

 function sliceBlob(blob, start, end, type) {
 type = type || blob.type;
 if (blob.mozSlice) {
  return blob.mozSlice(start, end, type);
 } else if (blob.webkitSlice) {
  return blob.webkitSlice(start, end type);
 } else {
  throw new Error("This doesn&#39;t work!");
 }
 }

파일 객체는 다음을 상속합니다. Blob, 매우 편리하게 사용할 수 있습니다. File 객체는 로컬 시스템 이미지 파일을 로드하고 createObjectURL을 통해 URL을 생성하고 이를 표시합니다.

js의 Blob 객체 유형에 대한 자세한 소개

관련 기사