---
type: note
kind: Idea
tags: ['blob', 'javascript', 'file', 'axios']
status: release
ctime: 2022-04-09
mtime: 2024-03-22
generated: { by: human:cbcruk, at: 2024-03-28T21:31:27Z }
verified: { by: claude/opus-5, at: 2026-08-19T00:00:00Z }
sources:
  - id: medium--fakiolinho-handle-blobs-requests
    resource: https://medium.com/@fakiolinho/handle-blobs-requests-with-axios-the-right-way-bb905bdb1c04
    title: "Handle Blobs requests with Axios the right way | by Marios Fakiolas | Medium"
  - id: heropy-2019-02
    resource: https://heropy.blog/2019/02/28/blob/
    title: "Blob(블랍) 이해하기 | HEROPY"
  - id: pks2974-medium-file-api-ec-a0-95-eb-a6-ac-ed-95
    resource: https://pks2974.medium.com/file-api-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B0-729fa6a3a0ba
    title: "File API 정리하기. 최근 FileReader 를 사용할 일이 생겨 File API 를 정리… | by 박성룡 ( Andrew park ) | Medium"
---

- 캔버스로 동영상 프레임을 캡쳐한다. 
- 텍스트를 입력 받는다. 해당 텍스트를 서버에 보내고 음성파일을 응답받는다. 
  - `Blob`데이터는 `URL.createObjectURL()`로 변환해서 `img`, `audio` 태그에 연결한다.

---

- [[JS] Blob와 Blob URL - 코드쓰는사람](https://taegon.kim/archives/5078)
- [Handle Blobs requests with Axios the right way | by Marios Fakiolas | Medium](https://medium.com/@fakiolinho/handle-blobs-requests-with-axios-the-right-way-bb905bdb1c04)
- [Blob(블랍) 이해하기 | HEROPY](https://heropy.blog/2019/02/28/blob/)
- [File API 정리하기. 최근 FileReader 를 사용할 일이 생겨 File API 를 정리… | by 박성룡 ( Andrew park ) | Medium](https://pks2974.medium.com/file-api-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B0-729fa6a3a0ba)