Data URI의 이미지 ( + 화면캡쳐)

 

 

프로젝트 진행중 canvas를 통해 화면캡쳐한 이미지로 미리보기를 생성하고 저장할 때는,

dataURI형식으로 캡쳐가 되어 데이터를 파일 형식으로 저장히기 위해서 

이 데이터를 blob으로 데이터 디코딩을 진행하여 이미지를 저장하도록 설정하였다.

이미 저장된 이미지를 화면에 표시하려고 할 때는, 

 

이미지 타입체크를 하는 함수를 만들어 이미지 타입을 보고 video 인지 img인지 판단할 수 있도록 설정하였다. 

 

 

 

 

Data URI

Data URI란 이미지 데이타를 base64인코딩을 하여 이미지를 생성하는 것으로 외부 데이터를 파일형태로 저장하지 않고 사용가능하다는 장점이 있으나 인코딩시에 크기가 증가하게 도므로 img파일의 용량이 큰 경우에는 사용하지 않는 것이 좋다. 

다음과 같은 형태를 나타낸다. 

data:image/png;base64,QVQoU2NkYGD4...

 

 

 

base64변환

WindowOrWorkerGlobalScope에 base utility method로 btoa와 atob가 존재한다. 

• btoa(DOMString data):DomString -> 입력문자열을 Base64로 반환 (유니코드와 같이 알 수없는 문자열 입력시 InvalidCharacterError 발생) 
• atob(DOMString data):ByteString -> Base64를 디코딩하여 반환(Base64에 등록되지 않은 문자열(A-Z,a-z,0–9+/ 이외) 입력시 DOMException 발생)

 

 

Unit8Array (btoa)

ArrayBuffer는 일반고정길이의 이진데이터버퍼를 나타내는데 사용된다. 이를 상속받아 구현한 typed Array 인 Unit8Array를 이용하여 버퍼데이터를  8bit 데이터 형으로 만들고 이를 6bit로 쪼개서 Base64형태로 만들어내는 btoa를 구현할 수 있다. 

 

 

 

FileReader (atob)

FileReader는 File혹은 Blob객체를 이용하여 파일 내용을 읽도록 만들어주는 Web API이다. FileReader.readAsDataURL()으로 Base64로 변환하고 이를 atob로 데이터 변환이 가능하다. 

 

 

DataURI -> Blob

우리는 화면 캡쳐로 받아온 DataURI형식의 데이터를 blob타입으로 파일을 저장할 것이다.

const handleCapture = () =>{
        
        const width = videoRef.current.clientWidth;
        const height = videoRef.current.clientHeight;

        canvasRef.current.setAttribute("width", width)
        canvasRef.current.setAttribute("height", height)

        const ctx = canvasRef.current.getContext('2d')
        ctx.drawImage(videoRef.current, 0, 0, width, height)
        let URL = canvasRef.current.toDataURL()

        var blobBin = atob(URL.split(',')[1]);	// base64 데이터 디코딩
        var array = [];
        for (var i = 0; i < blobBin.length; i++) {
            array.push(blobBin.charCodeAt(i));
        }
        var file = new Blob([new Uint8Array(array)], {type: 'image/png'});
        setImages([...images, file])  
    }

파일로 저장된 이미지 타입체크는 다음과 같이 하면 된다. 

    const imageTypeCheck = (image)=>{ 
        const type = image.slice(image.indexOf(".")+1).toLowerCase(); 
        if(type === "jpg" || type === "png" || type === "jpeg" || type === "gif" || type === "bmp"){ 
            return "image"
        }else if(type === "mp4" || type === "avi" || type === "wmv" || type === "mov" ){
            return "video"
        }
    }

 

 

(참고한 사이트)

https://stackoverflow.com/questions/12168909/blob-from-dataurl

Blob from DataURL?

http://daplus.net/javascript-%EB%AC%B8%EC%9E%90%EC%97%B4%EA%B3%BC-arraybuffer-%EA%B0%84-%EB%B3%80%ED%99%98/

[javascript] 문자열과 ArrayBuffer 간 변환 - 리뷰나라

https://pks2974.medium.com/base-64-%EA%B0%84%EB%8B%A8-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B0-da50fdfc49d2

Base 64 간단 정리하기

https://hsmtree.wordpress.com/2016/05/05/data-uris%EB%A1%9C-image-%EC%83%9D%EC%84%B1%ED%95%98%EA%B8%B0/

data URIs로 image 생성하기