자바 백앤드에서 canvas의 data URL 저장하기

캔버스에서 toDataURL()이라는 함수를 실행하면 data url이 나온다. base 64로 인코딩된 이미지라고 한다. (https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL) 이 데이터 URL을 서버로 업로드해서 이미지 파일로 저장하는 방법에 대해서 아주 간단하게 정리해보려고 한다. 이거 하면서 쓸데없이 뻘짓을 많이 했는데 다른 분들이 바로 성공하시길.

data:image/png;base64,을 제거하고 디코딩

import java.util.Base64;

public class Base64Utils {
    private static final String BASE_64_PREFIX = "data:image/png;base64,";

    public static byte[] decodeBase64ToBytes(String imageString) {
        if (imageString.startsWith(BASE_64_PREFIX))
            return Base64.getDecoder().decode(imageString.substring(BASE_64_PREFIX.length()));
        else
            throw new IllegalStateException("it is not base 64 string");
    }

}

디코딩이 안되서 계속 찾아봤더니, dataURL의 앞부분인 data:image/png;base64,을 제거하고 디코딩 해야했다... (찾아본 링크)

반환된 바이트 배열을 가지고 파일로 저장하든 마음대로 하시면 된다. 파일 저장은 아래의 코드로 했다.

import java.io.ByteArrayInputStream;
import java.io.IOException;
import java.nio.file.Files;
import java.nio.file.Path;

public  class FileSystemStorageService {

    private final Path path;

    protected FileSystemStorageService(Path path) {
        this.path = path;
    }

    @Override
    public String store(byte[] bytes, String name) {
        try {
            Files.copy(new ByteArrayInputStream(bytes), this.path.resolve(name));
            return this.path.resolve(name).toAbsolutePath().toString();
        } catch (IOException e) {
            throw new StorageException("Failed to store file " + name, e);
        }
    }