convertImageToBlob

이미지를 canvas를 활용해 원하는 이미지 포맷(png, jpeg, webp)의 Blob 형태로 변환해주는 함수입니다.

💡 canvas.toBlob()함수가 허용하는 이미지 타입은 image/png, image/jpeg, image/webp 입니다. jpg의 경우 내부적으로 jpeg로 변경합니다.

• HTMLCanvasElement: toBlob() - MDN

Browsers are required to support image/png; many will support additional formats including image/jpeg and image/webp.

Code

🔗 실제 구현 코드 확인

Interface

typescript

type CanvasImageType = 'png' | 'jpeg' | 'jpg' | 'webp';

const convertImageToBlob: (
  url: string,
  imageType?: CanvasImageType // default: 'png'
) => Promise<Blob>;

Usage

typescript

import { convertImageToBlob } from '@modern-kit/utils';

const imageBlob = await convertImageToBlob("이미지 src", 'png');

Note

• HTMLCanvasElement: toBlob() - MDN