카메라 & 갤러리

디바이스 카메라와 사진 갤러리에서 이미지를 선택하여 웹으로 전달합니다.

개요

카메라 촬영 또는 갤러리에서 이미지를 선택하면 SDK가 결과를 JS 콜백으로 전달합니다. 카메라 촬영 이미지의 EXIF 방향 정보는 자동으로 보정됩니다.

기능	Android	iOS
카메라 촬영	✓ (Android 7.0+)	✓
갤러리 선택	✓ (Android 7.0+)	✓

지원 플랜: Basic 이상

사전 준비

Android

AndroidManifest.xml에는 카메라 권한이 주석 처리된 상태로 배포됩니다. 카메라 촬영을 사용하려면 주석을 해제하세요. (갤러리 선택은 시스템 문서 선택기를 사용하므로 별도 권한이 필요 없습니다.)

<uses-permission android:name="android.permission.CAMERA" />

iOS

Info.plist에 다음 권한 설명을 추가해야 합니다.

<key>NSCameraUsageDescription</key>
<string>사진 촬영을 위해 카메라에 접근합니다.</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>이미지 선택을 위해 사진 라이브러리에 접근합니다.</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>촬영한 사진을 저장하기 위해 사진 라이브러리에 접근합니다.</string>

파일 선택 요청

unveilyBridge.openFileSelector(cb)는 코어 메서드로, cb는 결과를 받을 콜백 함수 이름 문자열입니다. 생략 시 기본값 'onFileResult'가 사용됩니다.

// 카메라 또는 갤러리 선택 다이얼로그 열기
window.unveilyBridge.openFileSelector("onFileResult");

두 번째 인자로 이미지 처리 옵션을 JSON 문자열로 전달할 수 있습니다.

window.unveilyBridge.openFileSelector("onFileResult", JSON.stringify({
  maxDimension: 1600,     // 긴 변 최대 픽셀 (초과 시 비율 유지 축소)
  quality: 0.8,           // JPEG 압축 품질 (0–1)
  maxBytes: 2000000       // 최대 파일 크기(바이트)
}));

옵션	타입	설명
`maxDimension`	`number`	긴 변 최대 픽셀. 초과 시 비율을 유지하며 축소
`quality`	`number`	JPEG 압축 품질 (0–1)
`maxBytes`	`number`	결과 이미지 최대 바이트 크기

unveilyBridge는 WebView에 자동 주입됩니다. 별도 초기화 없이 즉시 사용할 수 있습니다.

콜백 처리

선택이 완료되면 SDK가 콜백 함수를 위치 인자 (base64OrUri, isSuccess) 형태로 호출합니다. 첫 번째 인자는 이미지 데이터(Android는 Base64 문자열)이고, 두 번째 인자는 성공 여부입니다.

function onFileResult(base64OrUri, isSuccess) {
  if (!isSuccess) {
    console.log("선택 실패 또는 취소:", base64OrUri);
    return;
  }

  // 이미 URI/데이터 URI면 그대로, 순수 Base64면 data URI로 감싸 표시
  const src = /^(https?:|file:|content:|data:)/.test(base64OrUri)
    ? base64OrUri
    : `data:image/jpeg;base64,${base64OrUri}`;

  document.getElementById("preview").src = src;
}

콜백 파라미터

파라미터	타입	설명
`base64OrUri`	`string`	성공 시 이미지 데이터(Android는 순수 Base64), 실패 시 오류 메시지
`isSuccess`	`boolean`	선택 성공 여부

카메라로 촬영한 이미지의 EXIF 방향 정보는 SDK에서 자동으로 보정합니다. 세로 방향으로 촬영해도 90도 회전 없이 올바른 방향으로 전달됩니다.

오류 처리

isSuccess === false일 때 첫 번째 인자에는 상황에 따른 메시지가 담겨 있습니다.

상황	`isSuccess`
사용자가 취소	`false`
카메라/갤러리 권한 거부	`false`
이미지 처리 실패	`false`

서버 이미지 업로드

Android에서 콜백으로 받은 값은 data URI 접두사가 없는 순수 Base64 문자열입니다. 서버에서 별도 전처리 없이 바로 디코딩할 수 있습니다.

function onFileResult(base64OrUri, isSuccess) {
  if (!isSuccess) return;
  fetch('/api/upload', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ base64: base64OrUri })
  });
}

const sharp = require('sharp');

app.post('/api/upload', async (req, res) => {
  const { base64 } = req.body;
  const buffer = Buffer.from(base64, 'base64');

  const filename = `${Date.now()}.jpg`;
  await sharp(buffer).resize(800).jpeg({ quality: 85 }).toFile(`uploads/${filename}`);

  res.json({ url: `/uploads/${filename}` });
});

[HttpPost("upload")]
public async Task<IActionResult> Upload([FromBody] UploadRequest request)
{
    var bytes = Convert.FromBase64String(request.Base64);
    var filename = $"{Guid.NewGuid()}.jpg";
    var path = Path.Combine("wwwroot/uploads", filename);

    await System.IO.File.WriteAllBytesAsync(path, bytes);
    return Ok(new { url = $"/uploads/{filename}" });
}

@PostMapping("/api/upload")
public ResponseEntity<?> upload(@RequestBody UploadRequest request) {
    byte[] bytes = Base64.getDecoder().decode(request.getBase64());

    String filename = UUID.randomUUID() + ".jpg";
    Path path = Paths.get("uploads/" + filename);
    Files.write(path, bytes);

    return ResponseEntity.ok(Map.of("url", "/uploads/" + filename));
}

<?php
$data = json_decode(file_get_contents('php://input'), true);
$imageData = base64_decode($data['base64']);

$filename = uniqid() . '.jpg';
file_put_contents('uploads/' . $filename, $imageData);

echo json_encode(['url' => '/uploads/' . $filename]);

<%
Dim base64Data, filename
base64Data = Request.Form("base64")

' Base64 디코딩 (MSXML 사용)
Dim xmlObj
Set xmlObj = CreateObject("MSXML2.DOMDocument")
xmlObj.LoadXML "<root>" & base64Data & "</root>"
Dim base64Node
Set base64Node = xmlObj.selectSingleNode("root")

filename = "uploads/" & Replace(CStr(Now), ":", "-") & ".jpg"
' 파일 저장 처리 (Scripting.FileSystemObject 등 활용)

Response.ContentType = "application/json"
Response.Write "{""url"": ""/uploads/" & filename & """}"
%>

카메라 & 갤러리

On this page