모바일 버전 : 이미지 로드 & 저장 이슈

이미지 로드

이슈

• 모바일에서 직접 촬영한 사진을 이미지 에디터로 로드할 수 있는데 이 때 해상도가 높은 이미지의 경우 사용성이 좋지 않다.
• 이미지 에디터에서 크롭, 드로잉과 같이 마우스 제스쳐가 포함된 액션의 경우 원본 이미지 사이즈 대비 화면 비율 에 따라 액션이 결정되므로 고해상도 이미지일수록 사용성이 떨어진다.
• 디바이스별 최대 해상도

• iPhone : 3264 * 2448
• Galaxy4 : 4128 * 3096 (고해상도) / 3264 * 2448 (일반) / 2048 * 1152 (저해상도)

• 사용성을 고려한 적정 이미지 사이즈는 3264 * 2448이며 안드로이드 디바이스에서 고해상도로 촬영된 이미지를 로드할 경우 파일 업로드 이벤트 발생 시 다음과 같이 처리한다.

고해상도 이미지 업로드 처리 방법

<input type="file" accept="image/*" id="input-image-file">

var MAX_RESOLUTION = 3264 * 2448;

$('input-image-file').on('change', function(event) {
    var file;
    var img;
    var resolution;

    if (!supportingFileAPI) {
        alert('This browser does not support file-api');
    }

    file = event.target.files[0];

    if (file) {
        img = new Image();

        img.onload = function() {
            resolution = this.width * this.height;

            if (resolution <= MAX_RESOLUTION) {
                imageEditor.loadImageFromFile(file);
            } else {
                alert('Loaded image\'s resolution is too large!\nRecommended resolution is 3264 * 2448!');
            }

            URL.revokeObjectURL(file);
        };

        img.src = URL.createObjectURL(file);
    }
});

이미지 저장

이슈

• 편집된 이미지를 저장할 경우 현재 샘플 페이지에서는 클라이언트 저장 방식을 예로 들었으나, 실제 서비스에는 서버로 파일 전송하여 이미지를 저장할 것으로 예상된다.
• Ajax 통신을 이용한다.

서버 이미지 저장 방법

Step 1. 이미지 에디터에서 저장하는 이미지 데이터를 가져온다.

var dataURL = imageEditor.toDataURL();

Step 2. base64 인코딩된 이미지 데이터를 Ajax 통신하여 서버로 보낸다.

$.ajax({
    type: 'POST',
    url: serverUrl,
    data: { 
       imgBase64: dataURL // Step 1에서 가져온 데이터
    }
}).done(function() {
    console.log('saved!'); 
});

Step 3. 전송받은 데이터를 서버에서 처리 후 저장한다.

• JAVA 사용 참조
• PHP 사용 참조