[React] react-canvas-draw 에 CanvasDraw 에 그린 그림의 dataURL 을 File 로 변환시키는 javascript 로직

이것은 파일명에 Data.now 를 사용해 현재 날짜의 밀리초를 파일명으로 삽입하여 파일명을 유동적으로 자동 지정되게 하였다.

요즘 버전?

const dataURLtoFile = (dataurl) => {
    const arr = dataurl.split(",");
    const mime = arr[0].match(/:(.*?);/)[1];
    const bstr = window.atob(arr[1]);
    let n = bstr.length;
    const u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    const name = Date.now() + "." + mime.split("/")[1];

    return new File([u8arr], name, { type: mime });
};

 

결과

or

이것은 파일명을 직접 지정해주는 방식이다.

function dataURLtoFile(dataurl, filename) {
    var arr = dataurl.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = window.atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename, {
        type: mime
    });
}