[240719 TIL] 클라이언트에서 base64

Sharp를 사용하지 않고 이미지를 10px로 리사이즈하고 Base64로 변환하는 작업을 클라이언트 측에서 수행하려면 HTML5 Canvas API를 사용할 수 있습니다. 이 방법은 이미지의 크기 조정을 수행하고 결과를 Base64로 인코딩하는 데 사용할 수 있습니다.

다음은 클라이언트 측에서 이 작업을 수행하는 방법입니다:

1. 이미지 로드 및 Canvas를 사용한 크기 조정 및 Base64 변환 함수

const loadImage = (src: string): Promise<HTMLImageElement> => {
    return new Promise((resolve, reject) => {
        const img = new Image();
        img.crossOrigin = "anonymous"; // CORS가 필요한 경우
        img.onload = () => resolve(img);
        img.onerror = reject;
        img.src = src;
    });
};

const resizeImageToBase64 = async (src: string, size: number): Promise<string> => {
    const img = await loadImage(src);
    const canvas = document.createElement('canvas');
    canvas.width = size;
    canvas.height = size;
    const ctx = canvas.getContext('2d');

    if (!ctx) {
        throw new Error('Failed to get canvas context');
    }

    ctx.drawImage(img, 0, 0, size, size);
    return canvas.toDataURL('image/png');
};

2. 컴포넌트에서 이미지 로드 및 변환

import React, { useEffect, useState } from 'react';

const ImageComponent = ({ src }: { src: string }) => {
    const [base64, setBase64] = useState<string | null>(null);

    useEffect(() => {
        const fetchData = async () => {
            try {
                const base64Data = await resizeImageToBase64(src, 10);
                setBase64(base64Data);
            } catch (error) {
                console.error(error);
            }
        };

        fetchData();
    }, [src]);

    if (!base64) {
        return <div>Loading...</div>;
    }

    return (
        <img src={base64} alt="Image" />
    );
};

export default ImageComponent;

3. 유틸리티 함수 resizeImageToBase64 설명

• loadImage 함수는 이미지를 로드하고 Promise를 반환합니다.
• resizeImageToBase64 함수는 이미지를 로드하고, Canvas를 사용하여 이미지를 10px 크기로 리사이즈한 다음, Base64 문자열로 변환합니다.

요약

이 코드는 클라이언트 측에서 이미지를 10px로 리사이즈하고 Base64로 변환하여 표시합니다. 이를 통해 sharp 라이브러리를 사용하지 않고도 이미지를 처리할 수 있습니다. 다만, 이 방법은 브라우저에서만 동작하므로 서버 사이드 렌더링에서는 사용할 수 없습니다.