카메라로 사진 촬영하기

openCamera

openCamera 는 카메라를 실행해서 촬영된 이미지를 반환하는 함수예요.

시그니처

function openCamera(options?: OpenCameraOptions): Promise<ImageResponse>;

파라미터

• options필수 · OpenCameraOptions
  

  카메라 실행 시 사용되는 옵션 객체예요.

  • options.base64boolean · false
    

    이미지를 Base64 형식으로 반환할지 여부를 나타내는 불리언 값이에요. 기본값은 false예요. true로 설정하면 dataUri 대신 Base64 인코딩된 문자열을 반환해요.

  • options.maxWidthnumber · 1024
    

    이미지의 최대 너비를 나타내는 숫자 값이에요. 기본값은 1024예요.

반환 값

• Promise<ImageResponse>
  

촬영된 이미지 정보를 포함한 객체를 반환해요. 반환 객체의 구성은 다음과 같아요:

• id: 이미지의 고유 식별자예요.
• dataUri: 이미지 데이터를 표현하는 데이터 URI예요.

예제

카메라 실행 후 촬영된 사진 가져오기

React

import { ImageResponse, openCamera } from '@apps-in-toss/web-framework';
import { Button, Asset, Text } from '@toss-design-system/mobile';
import { useState } from 'react';

const base64 = true;

// 카메라를 실행하고 촬영된 이미지를 화면에 표시하는 컴포넌트
function Camera() {
  const [image, setImage] = useState<ImageResponse | null>(null);

  async function handleClick() {
    try {
      const response = await openCamera({ base64 });
      setImage(response);
    } catch (error) {
      console.error('사진을 가져오는 데 실패했어요:', error);
    }
  }

  // base64 형식으로 반환된 이미지를 표시하려면 데이터 URL 스키마 Prefix를 붙여야해요.
  const imageUri = base64 ? 'data:image/jpeg;base64,' + image?.dataUri : image?.dataUri;

  return (
    <div>
      {image ? <Asset.Image src={imageUri} /> : <Text>사진이 없어요</Text>}
      <Button onClick={handleClick}>사진 촬영하기</Button>
    </div>
  );
}

React Native

import { ImageResponse, openCamera } from '@apps-in-toss/framework';
import { Asset, Button, Text } from '@toss-design-system/react-native';
import { useState } from 'react';
import { View } from 'react-native';

const base64 = true;

// 카메라를 실행하고 촬영된 이미지를 화면에 표시하는 컴포넌트
function Camera() {
  const [image, setImage] = useState<ImageResponse | null>(null);

  async function handlePress() {
    try {
      const response = await openCamera({ base64 });
      setImage(response);
    } catch (error) {
      console.error('사진을 가져오는 데 실패했어요:', error);
    }
  }

  // base64 형식으로 반환된 이미지를 표시하려면 데이터 URL 스키마 Prefix를 붙여야해요.
  const imageUri = base64 ? 'data:image/jpeg;base64,' + image?.dataUri : image?.dataUri;

  return (
    <View>
      {image ? <Asset.Image source={{ uri: imageUri }} /> : <Text>사진이 없어요</Text>}
      <Button onPress={handlePress}>사진 촬영하기</Button>
    </View>
  );
}