HTML5_html5 튜토리얼 기술에서 Blob 객체 사용에 대한 심층 분석

HTML5의 Blob 객체와 MYSQL의 BLOB 유형은 개념적으로 다릅니다. MYSQL의 BLOB 유형은 단지 바이너리 데이터 컨테이너입니다. 이진 데이터를 저장하는 것 외에도 HTML5의 Blob 개체는 이 데이터의 MINE 유형을 설정할 수도 있습니다. 이는 파일을 저장하는 것과 동일합니다. 다른 많은 이진 개체도 이 개체에서 상속됩니다.
최신 브라우저의 약간 이전 버전에서는 이 Blob 개체가 표준화되지 않았으므로 BlobBuilder 등을 사용하여 생성해야 합니다. 그러나 이제 Blob은 새로운 생성자 Blob에 의해 직접 생성될 수 있을 정도로 표준화되었으며 거의 ​​모든 브라우저가 이미 이 방법을 지원하므로 이전 표준에 대해 걱정할 필요가 없습니다.

CSS 코드클립보드에 콘텐츠 복사

1. var data='하이포탄산코발트'
2. var blob=new Blob([데이터],{"유형":"text/html" });
3. console.log(blob)

이런 방식으로 Blob 객체를 생성합니다. Blob 생성자의 매개변수는 다소 이상합니다. 첫 번째 매개변수는 데이터 세트이므로 배열이어야 합니다. 위의 예에서는 숫자를 사용해야 합니다. 두 번째 매개변수는 이 Blob 객체의 구성 속성입니다. 현재는 관련 MIME 유형만 설정해야 하며 향후 확장을 위해 설정해야 합니다.
그렇다면 데이터를 Blob으로 만들면 무슨 소용이 있을까요? Blob 객체의 경우 해당 객체에 액세스할 수 있는 URL을 생성할 수 있습니다. URL 객체의 createObjectURL 메소드를 사용하십시오.

CSS 코드클립보드에 콘텐츠 복사

1. var data='하이포탄산코발트'
2. var blob=new Blob([데이터],{"유형":"text/html" });
3. onload=function(){
4. var iframe=document.createElement("iframe")
5. iframe.src=URL.createObjectURL(blob)
6. document.body.appendChild(iframe)
7. }

위 예시의 text/html 뿐만 아니라, 브라우저에서 지원하는 모든 타입을 이런 방식으로 사용할 수 있습니다. 또한, 이 Blob-URL의 라이프 사이클은 생성부터 문서 공개까지이므로 리소스 낭비가 발생하지 않습니다.
Blob은 HTML5의 매우 기본적인 바이너리 데이터 개체입니다. 많은 메서드의 작업 매개변수가 Blob 사용을 지원합니다. 즉, 매개변수 유형이 바이너리 데이터인 거의 모든 메서드는 Blob을 매개변수로 사용하는 것을 지원합니다. 따라서 데이터를 Blob으로 변환하면 후속 작업이 더 편리해질 수 있습니다.

방법

슬라이스()

소스 Blob 개체의 지정된 범위 내의 데이터를 포함하는 새 Blob 개체를 반환합니다.

CSS 코드클립보드에 콘텐츠 복사

1. 블롭 슬라이스(
2. 선택적 장기 장기 시작,
3. 선택적 긴 긴 끝,
4. 선택적 DOMString contentType
5. }

매개변수
start option
시작 인덱스, 음수일 수 있으며 구문은 배열의 슬라이스 방법과 유사합니다. 기본값은 0입니다.
end option
end index 는 음수일 수 있으며 구문은 배열의 슬라이스 방법과 유사합니다. 기본값은 새 Blob 객체의 마지막 인덱스입니다.
contentType 선택적
이 값은 새 Blob 객체의 유형 속성이 됩니다. 기본값은 빈 문자열입니다.
반환 값
소스 Blob 객체의 지정된 범위 내의 데이터를 포함하는 새 Blob 객체입니다.
참고
시작 매개변수의 값이 소스 Blob보다 큽니다. 객체의 크기 속성 값이 여전히 큰 경우 반환된 Blob 객체의 크기 값은 0입니다. 이는 데이터가 포함되어 있지 않음을 의미합니다.

BlobPropertyBag

두 가지 속성 유형과 엔딩을 포함하는 객체입니다.
type
은 Blob 객체의 유형 속성을 설정합니다.
endings(더 이상 사용되지 않음)
는 BlobBuilder.append() 메소드 엔딩 매개변수에 해당합니다. 이 매개변수의 값은 "transparent" 또는 "native"일 수 있습니다.
Blob 생성자 사용 예

다음 코드:

CSS 코드클립보드에 콘텐츠 복사

1. var aFileParts = ["안녕!"];
2. var oMyBlob = new Blob(aFileParts, { "type" : "text/xml" }) ; // 얼룩

은 다음과 같습니다:

CSS 코드클립보드에 콘텐츠 복사

1. var oBuilder = new BlobBuilder()
2. var aFileParts = ["안녕!" ]
3. oBuilder.append(aFileParts[0])
4. var oMyBlob = oBuilder.getBlob("text/xml") // 블롭

BlobBuilder 인터페이스는 Blob 객체를 생성하는 또 다른 방법을 제공하지만 이 방법은 이제 더 이상 사용되지 않으므로 더 이상 사용하면 안 됩니다.

예: 유형 배열 및 Blob 객체를 사용하여 객체 URL 생성

CSS 코드클립보드에 콘텐츠 복사

1. var typedArray = GetTheTypedArraySomehow()
2. var blob = new Blob([typedArray], {type: "application/octet-binary"}) // 적합한 MIME 유형을 전달합니다.
3. var url = URL.createObjectURL(blob)
4. // blob:d3958f5c-0777-0845-9dcf-2cb28783acaf
와 유사한 URL 문자열을 생성합니다.
5. // 예를 들어 img에서 일반 URL처럼 사용할 수 있습니다.src.