Canvas 객체를 이미지로 AWS S3에 업로드 하기

HTML 상에 Canvas에서 그려진 객체를 이미지로 업로드하는 방법에 대해서 조사하였다.

 

toDataURL

toDataURL란?
HTML5 Canvas의 제공 함수 중에 하나이며 Canvas의 내용을 data URL 문자열로 변환한다.
원하는 인코딩 타입으로 변환 가능
변환된 데이터 - data : 마임 타입; base64, 이미지를 변환한 문자열

 

toDataURL 메서드를 사용하여서 canvas를 이미지로 변환하는 코드이다. toDataURL의 경우 모질라 파이어 폭스에서는 image/jpeg, image/webp 두 가지만 허용함으로 주의해야 한다. 브라우저마다 API의 지원범위가 조금씩 다르다. 

var dataUrl = canvas.toDataURL("image/jpeg");
var blobData = dataURItoBlob(dataUrl);
var params = {Key: "file_name", ContentType: "image/jpeg", Body: blobData};
bucket.upload(params, function (err, data) {});

function dataURItoBlob(dataURI) {
    var binary = atob(dataURI.split(',')[1]);
    var array = [];
    for(var i = 0; i < binary.length; i++) {
        array.push(binary.charCodeAt(i));
    }
    return new Blob([new Uint8Array(array)], {type: 'image/jpeg'});
}

 

toDataURL에 반환 값을 보면 아래와 같다.

 

AWS S3에서 확인 결과 아래와 같이 Canvas 객체가 업로드된 것을 확인할 수 있다.

 

그러나 실제 데이터는 아래처럼 아무런 색이 없는 상태로 업로드되어있다. Canvas 객체에 그린 데이터가 저장이 되지 않았다는 추측이 든다.

 

원인은 인코딩 특성에 있었다. 인코딩을 IMAGE/JPEG 으로 하는 경우에 기본 검은색 배경을 갖게 된다는 것이다. 이러한 특성을 고려하여 재수정하였다.

stackoverflow.com/questions/26742180/canvas-todataurl-results-in-solid-black-image

canvas.toDataURL results in solid black image?

 

가장 쉬운 처리 방법은 이미지 타입이 IMAGE/PNG로 변경하는 것이다.

 

기타 여러 테스트를 하다가 CORS 등 크로스 도메인 문제도 경험하였다. 웹프로그램이 쉽기는 하나 제약 사항을 좀 미리 알아둬야 할 필요가 있어 보인다. 아니다 그냥 하면서 찾자.