blob

new Blob(array, { type : 'text/html' })

파일 다운로드 생성이 잘 안되서 확인해보니 type 지정을 안했다.

💡

Blob URL 방식은 Firefox 58+에서 CSP 제한이 있는 페이지에서도 스크립트를 주입할 수 있는 방법입니다. 이 방식을 사용할 때, 비동기성 때문에 발생할 수 있는 문제를 방지하려면 초기화 코드가 준비된 후 스크립트를 전달해야 합니다.

src 로 넣은 스크립트는 내용을 가져온 뒤에야 돈다(비동기).¹

const b = new Blob([script], { type: 'text/javascript' })
const u = URL.createObjectURL(b)
const s = document.createElement('script')
s.src = u
document.body.appendChild(s)
document.body.removeChild(s)
URL.revokeObjectURL(u)

---

Footnotes

1. Inject scripts with Blob URLs: “Because the textContent way is synchronous while the src way is asynchronous.” ↩

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

---

• [JS] Blob와 Blob URL - 코드쓰는사람
• Handle Blobs requests with Axios the right way | by Marios Fakiolas | Medium
• Blob(블랍) 이해하기 | HEROPY
• File API 정리하기. 최근 FileReader 를 사용할 일이 생겨 File API 를 정리… | by 박성룡 ( Andrew park ) | Medium

Footnotes

1. URL.createObjectURL() | MDN: “creates a string containing a blob URL pointing to the object given in the parameter.” ↩