Cloudinary를 활용한 이미지 프로세싱

Cloudinary

이미지와 비디오를 대규모로 관리, 변환, 최적화 및 전달할 수 있는 클라우드 기반 미디어 플랫폼.

---

이미지 스토리지로써 Cloudinary

cloudinary는 저장할 이미지를 받을 때 몇가지를 기대한다.

 

1. multipart/form-data 요청

2. formData로 감싸진 데이터

3. formData의 "file" 필드에 Blob으로 변환된 이미지 데이터

4. formData"의 upload_preset" 필드에 설정된 프리셋 값

const uploadImage = (blobImage) => {
  const formData = new FormData();
  formData.append("file", blobImage);
  formData.append("upload_preset", CLOUDINARY_PRESET /* 미리 설정한 프리셋값 상수 */);
  
  await axios.post(CLOUDINAEY_URL /* 업로드 URL 상수 */, formData);
};

---

Base64 => Cloudinary URL

Base64

이진 데이터를 텍스트로 인코딩하는 방식

Base64 URL 형식

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA..." />
          │    │         │       │
          │    │         │       └─ Base64로 인코딩된 이미지 데이터 (iVBORw..)
          │    │         └───────── 인코딩 방식 (base64)
          │    └─────────────────── MIME 타입 (image/png)
          └──────────────────────── Data URL 스키마

○ Base64는 캐싱이 불가능하고 인코딩, 디코딩 과정에서 CPU 과부하의 가능성이 있다.

Base64를 Cloudinary URL로 마이그레이션

1. Base64를 Blob 객체로 변환하는 함수 생성

const base64ToBlob = (src: string): Blob => {
  const [meta, base64String] = src.split(",");

  const mime = meta.match(/data:(.*);base64/)?.[1];
  if (!mime) {
    throw new Error("Invalid base64 image");
  }
  const binary = atob(base64String); // atob: Base64로 인코딩된 문자열을 디코딩(브라우저 내장 함수)
  const len = binary.length;
  const bytes = new Uint8Array(len); // Unit8Array: 8비트 부호 없는 정수 배열을 생성

  for (let i = 0; i < len; i++) {
    bytes[i] = binary.charCodeAt(i);
  }

  return new Blob([bytes], { type: mime });
};

export { base64ToBlob };

2. Blob 객체를 클라우드 호스팅으로 마이그레이션하는 함수 생성

import axios from "axios";

import { base64ToBlob } from "@/utils";

const uploadBlobImage = async (blob: Blob) => {
  const CLOUDINARY_URL = import.meta.env.VITE_CLOUDINARY_URL;
  const PRESET_NAME = import.meta.env.VITE_PRESET_NAME

  const formData = new FormData();
  formData.append("file", blob);
  formData.append("upload_preset", PRESET_NAME);

  const { data } = await axios.post(CLOUDINARY_URL, formData);

  const uploadedUrl = data.secure_url;
  
  return uploadedUrl;
};

export { uploadBlobImage };

---

Blob URL => Cloudinary URL

Blob URL

브라우저 메모리에 있는 Blob 객체 혹은 File 객체를 가리키는 임시 URL. 실제 서버주소가 아닌 브라우저 내부 객체를 참조하기 위한 URL이다.

BlobURL 형식

<img src="blob:http://localhost:5173/2d9a1f28-9611-4b96-8601-1af3054e12c6" />
          │    │                     │
          │    │                     └─ 브라우저가 생성한 고유 식별자(UUID)
          │    └────────────────────── Origin (현재 페이지의 프로토콜 + 도메인 + 포트)
          └─────────────────────────── Blob URL 스키마

BlobURL 을 Cloudinary URL로 마이그레이션

1. BlobURL을 Blob객체로 변환하는 함수 생성

import axios from "axios";

const blobUrlToBlob = (blobUrl: string) => {
  const { data } = await axios.get(blobUrl);
  const blob = data.blob();
  
  return blob;
};

export { blobUrlToBlob };

2. Blob 객체를 클라우드 호스팅으로 마이그레이션하는 함수 생성

위 base64 섹션의 함수와 동일