Blob이 아닌 Blob-firestore Blob에 canvas.toBlob을 저장하는 방법은 무엇입니까?

벤자민 H

jpeg Javascript 네이티브 Blob 이 있으며 firestore blob 으로 저장하고 싶습니다 .

하지만 물론 Firestore는 "FirebaseError : Function DocumentReference.update ()가 잘못된 데이터로 호출되었습니다. 지원되지 않는 필드 값 : 사용자 정의 Blob 객체 (문서의 필드 이미지에 있습니다 ..."라고 말합니다. "

javascript-blob에서 firestore-blob로 변환하는 방법이 있습니까?

canvas.toBlob(async (blob)=> {
    console.info(`Converting to blob: ${blob.constructor.name} and storing to firestore...`);
    await myselfRef.update({
        image: blob
    }, 'image/jpeg', 0.4));
Frangaren

JavaScript Blob을 Firestore Blob으로 변환하려면 다음 단계를 따라야합니다.

  1. .NET을 사용하여 JavaScript Blob을 ArrayBuffer로 변환합니다 your_blob.arrayBuffer().
  2. 생성자에 단일 매개 변수로 전달하여 방금 가져온 ArrayBuffer를 Uint8Array로 래핑합니다 .
  3. 사용 firebase.firestore.Blob.fromUint8Array(your_array), 마지막으로, 경우 FireStore 물방울을 만드는 방법.

Firestore Blob에서 JavaScript Blob으로 역변환을 수행하려면 거의 반대로 수행해야합니다.

  1. .NET을 사용하여 Firestore Blob을 Uint8Array로 변환합니다 firestore_blob.toUint8Array().
  2. 배열을 사용 하는 생성자를 사용 하여 JavaScript Blob을 만듭니다 . 배열 목록을 사용하여 호출해야합니다 (예 : new Blob([my_array]).

실제로 이에 대한 예가 있습니다. 이 함수 save()는 캔버스의 내용을 Firestore에 저장하는 데 사용됩니다. 그리고 함수 load()는 다시 캔버스에로드합니다.

const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');
const db = firebase.firestore();

function save() {
  canvas.toBlob(async blob => {
    const blob_url = URL.createObjectURL(blob);
    const ref = db.collection('blob').doc('blob');
    const array_buffer = await blob.arrayBuffer();
    const uint8_array = new Uint8Array(array_buffer);
    const firebase_blob = firebase.firestore.Blob.fromUint8Array(uint8_array);
    ref.update({
      image: firebase_blob,
    });
  });
}

async function load() {
  const ref = db.collection('blob').doc('blob');
  const doc = await ref.get();
  const firebase_blob = doc.get('image');
  const uint8_array = firebase_blob.toUint8Array();
  const blob = new Blob([uint8_array]);
  const blob_url = URL.createObjectURL(blob);
  const image = new Image();
  image.onload = () => {
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.drawImage(image, 0, 0);
    URL.revokeObjectURL(blob_url);
  }
  image.src = blob_url;
}

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

Blob not Blob - how to store a canvas.toBlob in a firestore Blob?

분류에서Dev

MySQL에 Blob (이미지)을 저장하는 방법은 무엇입니까?

분류에서Dev

Canvas.toBlob ()은 빈 blob 객체의 URL을 제공합니까?

분류에서Dev

미디어 파일 용 Blob을 저장하는 방법은 무엇입니까?

분류에서Dev

엔터티에 속하는 Blob 키 목록을 저장하는 방법은 무엇입니까?

분류에서Dev

URL에서 이미지를 가져 와서 mysql에 BLOB로 저장하는 방법은 무엇입니까? PHP

분류에서Dev

이 16 진수 blob을 디코딩하는 방법은 무엇입니까?

분류에서Dev

MySql Db에서 CalDav Blob을 검색하는 방법은 무엇입니까?

분류에서Dev

Windows Azure에서 Blob 저장소에 대한 서명을 얻는 방법은 무엇입니까?

분류에서Dev

Azure VM을 삭제할 때 저장소 Blob에서 "bootdiagnostics"컨테이너를 제거하는 방법은 무엇입니까?

분류에서Dev

데이터베이스에 BLOB 컬럼을 추가하는 방법은 무엇입니까?

분류에서Dev

Python에서 Azure Function을 Blob 컨테이너에 바인딩하는 방법은 무엇입니까?

분류에서Dev

C #을 사용하여 Firebird에서 byte []로 바이너리 blob을 읽는 방법은 무엇입니까?

분류에서Dev

Blob의 크기에 레이블을 지정하고 측정하는 방법은 무엇입니까?

분류에서Dev

Azure Function (C #) : Blob 컨테이너 A에서 다른 Blob 컨테이너 B로 많은 파일을 복사하는 방법은 무엇입니까? (함수는 10 분 안에 타임 아웃됩니다.)

분류에서Dev

Blob 컨테이너에 파일을 업로드하는 방법은 무엇입니까?

분류에서Dev

blob 파일을 PHP에서 이미지로 검색하는 방법은 무엇입니까?

분류에서Dev

blob 파일을 PHP에서 이미지로 검색하는 방법은 무엇입니까?

분류에서Dev

node.js의 @ azure / storage-blob을 통해 blob 저장소에서 파일의 보안 URL을 얻는 방법은 무엇입니까?

분류에서Dev

R에서 전체 바이너리 Blob을 읽는 방법은 무엇입니까?

분류에서Dev

상태 변경이 아닌 반응에 값을 저장하는 방법은 무엇입니까?

분류에서Dev

Azure Storage에서 Blob 파일을 다운로드하고 Powershell을 사용하여 FTP 서버에 저장하는 방법은 무엇입니까?

분류에서Dev

knex를 사용하여 Blob을 삽입하는 방법은 무엇입니까?

분류에서Dev

Azure 함수를 사용하여 Azure Blob 저장소에서 * .csv 파일을 편집하는 방법은 무엇입니까?

분류에서Dev

VHD를 Azure BLOB 저장소에 병렬로 업로드하는 방법은 무엇입니까?

분류에서Dev

Vert.x를 사용하여 Oracle Database 11g에 Blob을 삽입하는 방법은 무엇입니까?

분류에서Dev

Firebird 저장 프로 시저에서 바이너리 Blob에 대한 업데이트를 수행하는 방법은 무엇입니까?

분류에서Dev

HTML을 포함하는 변수 내에서 blob을 속성 바인딩하는 방법은 무엇입니까?

분류에서Dev

BLOB 크기 변경을 피하는 방법은 무엇입니까?

Related 관련 기사

  1. 1

    Blob not Blob - how to store a canvas.toBlob in a firestore Blob?

  2. 2

    MySQL에 Blob (이미지)을 저장하는 방법은 무엇입니까?

  3. 3

    Canvas.toBlob ()은 빈 blob 객체의 URL을 제공합니까?

  4. 4

    미디어 파일 용 Blob을 저장하는 방법은 무엇입니까?

  5. 5

    엔터티에 속하는 Blob 키 목록을 저장하는 방법은 무엇입니까?

  6. 6

    URL에서 이미지를 가져 와서 mysql에 BLOB로 저장하는 방법은 무엇입니까? PHP

  7. 7

    이 16 진수 blob을 디코딩하는 방법은 무엇입니까?

  8. 8

    MySql Db에서 CalDav Blob을 검색하는 방법은 무엇입니까?

  9. 9

    Windows Azure에서 Blob 저장소에 대한 서명을 얻는 방법은 무엇입니까?

  10. 10

    Azure VM을 삭제할 때 저장소 Blob에서 "bootdiagnostics"컨테이너를 제거하는 방법은 무엇입니까?

  11. 11

    데이터베이스에 BLOB 컬럼을 추가하는 방법은 무엇입니까?

  12. 12

    Python에서 Azure Function을 Blob 컨테이너에 바인딩하는 방법은 무엇입니까?

  13. 13

    C #을 사용하여 Firebird에서 byte []로 바이너리 blob을 읽는 방법은 무엇입니까?

  14. 14

    Blob의 크기에 레이블을 지정하고 측정하는 방법은 무엇입니까?

  15. 15

    Azure Function (C #) : Blob 컨테이너 A에서 다른 Blob 컨테이너 B로 많은 파일을 복사하는 방법은 무엇입니까? (함수는 10 분 안에 타임 아웃됩니다.)

  16. 16

    Blob 컨테이너에 파일을 업로드하는 방법은 무엇입니까?

  17. 17

    blob 파일을 PHP에서 이미지로 검색하는 방법은 무엇입니까?

  18. 18

    blob 파일을 PHP에서 이미지로 검색하는 방법은 무엇입니까?

  19. 19

    node.js의 @ azure / storage-blob을 통해 blob 저장소에서 파일의 보안 URL을 얻는 방법은 무엇입니까?

  20. 20

    R에서 전체 바이너리 Blob을 읽는 방법은 무엇입니까?

  21. 21

    상태 변경이 아닌 반응에 값을 저장하는 방법은 무엇입니까?

  22. 22

    Azure Storage에서 Blob 파일을 다운로드하고 Powershell을 사용하여 FTP 서버에 저장하는 방법은 무엇입니까?

  23. 23

    knex를 사용하여 Blob을 삽입하는 방법은 무엇입니까?

  24. 24

    Azure 함수를 사용하여 Azure Blob 저장소에서 * .csv 파일을 편집하는 방법은 무엇입니까?

  25. 25

    VHD를 Azure BLOB 저장소에 병렬로 업로드하는 방법은 무엇입니까?

  26. 26

    Vert.x를 사용하여 Oracle Database 11g에 Blob을 삽입하는 방법은 무엇입니까?

  27. 27

    Firebird 저장 프로 시저에서 바이너리 Blob에 대한 업데이트를 수행하는 방법은 무엇입니까?

  28. 28

    HTML을 포함하는 변수 내에서 blob을 속성 바인딩하는 방법은 무엇입니까?

  29. 29

    BLOB 크기 변경을 피하는 방법은 무엇입니까?

뜨겁다태그

보관