photo

Cordova에서 navigator.camera.getPicture()를 사용할 때, Android 10(API 29) 이상에서는 보안 정책 문제로 인해 file:// URL이 <img> 태그에서 표시되지 않는 경우가 있습니다.

해결 방법

1️⃣ camera 옵션에서 destinationType을 DATA_URL로 변경 (Base64 사용)

이미지를 Base64 데이터로 변환하여 <img> 태그에서 직접 표시하면 문제를 해결할 수 있습니다.

function takePhoto() {
    navigator.camera.getPicture(onSuccess, onFail, {
        quality: 80,
        destinationType: Camera.DestinationType.DATA_URL, // Base64로 저장
        saveToPhotoAlbum: true,
        sourceType: Camera.PictureSourceType.CAMERA
    });
}

function onSuccess(imageData) {
    const photoElement = document.getElementById("photo");
    photoElement.src = "data:image/jpeg;base64," + imageData; // Base64 이미지로 설정
    photoElement.style.display = "block";
}

✅ 이 방법의 장점
• file:// URL을 사용하지 않으므로 보안 문제 없음
• <img> 태그에 직접 표시 가능

2️⃣ Cordova의 file:// 경로를 cdvfile:// 또는 content://로 변환

Android 10 이상에서는 file:// 경로가 보안 문제로 차단되므로, window.resolveLocalFileSystemURL()을 사용하여 content://로 변환할 수 있습니다.

function onSuccess(imageURI) {
    window.resolveLocalFileSystemURL(imageURI, function(fileEntry) {
        fileEntry.file(function(file) {
            const reader = new FileReader();
            reader.onloadend = function() {
                const photoElement = document.getElementById("photo");
                photoElement.src = this.result; // 변환된 파일 URL 사용
                photoElement.style.display = "block";
            };
            reader.readAsDataURL(file); // 파일을 Base64로 변환
        }, onFail);
    }, onFail);
}

✅ 이 방법의 장점
• 원본 파일을 사용할 수 있음
• Base64 변환을 통해 <img>에 표시 가능

3️⃣ config.xml에서 파일 접근 권한 추가

config.xml 파일에서 파일 접근을 허용하는 설정을 추가합니다.

<platform name="android">
    <edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest">
        <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
        <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
    </edit-config>
</platform>

✅ 이 설정을 적용한 후에는 cordova platform rm android && cordova platform add android를 실행하여 다시 빌드해야 합니다.

4️⃣ AndroidManifest.xml에서 android:requestLegacyExternalStorage="true" 설정 추가 (Android 10 이상용)

Cordova에서 AndroidManifest.xml 파일을 직접 수정할 수 없으므로, config.xml에서 다음과 같이 설정해야 합니다.

<platform name="android">
    <edit-config file="AndroidManifest.xml" mode="merge" target="/manifest/application">
        <application android:requestLegacyExternalStorage="true" />
    </edit-config>
</platform>

✅ 이 설정을 적용한 후 cordova platform rm android && cordova platform add android를 실행해야 합니다.

✅ 최종 정리 (추천 방법)
1. 가장 쉬운 방법: destinationType: Camera.DestinationType.DATA_URL 설정 → Base64로 변환하여 <img> 태그에 사용
2. 원본 파일을 사용해야 한다면: window.resolveLocalFileSystemURL()을 이용하여 file:// → data:image/jpeg;base64,로 변환
3. Android 10 이상에서는 권한 문제 해결을 위해 config.xml 수정 후 빌드

이제 다시 실행하면 사진이 정상적으로 표시될 것입니다! 🚀