cordova拍照插件最新版本的开发、模拟器运行和no image selected问题解决

文章目录

[cordova拍照插件最新版本的开发、模拟器运行和no image selected问题解决](#cordova拍照插件最新版本的开发、模拟器运行和no image selected问题解决)
前言
一、cordova-plugin-camera8.0.0后版本的拍照功能实现
- （一）实现步骤
- （二）源码
[二、android studio模拟器设置和测试运行](#二、android studio模拟器设置和测试运行)
- [1.android studio设置](#1.android studio设置)
[三、运行cordova 拍照程序到模拟器](#三、运行cordova 拍照程序到模拟器)
[四、no image selected问题](#四、no image selected问题)

前言

cordova-plugin-camera插件功能是调用手机中的相机完成拍照或选择图库中的图片完成显示。但是在开发中经常出现各种错误或问题。包括："no image selected"错误，无法正确显示图库相片或拍照后的照片；拍照功能无法正确调用运行；或者模拟器中无法完成拍照等问题。以下按照2026年最新cordova-plugin-camera插件8.0.0版本的开发，说明功能实现方法、注意事项和问题解决方案。

一、cordova-plugin-camera8.0.0后版本的拍照功能实现

关键要点：

cordova_plugin_camera插件建议采用destinationType=FILE_URI，而不是DATA_URL，原因是DATA_URL占用内存过多，容易因内存问题导致功能运行失败；
在使用FILE_URI方法作为destinationType时，插件需要额外安装cordova-plugin-file，将文件路径解析为 DOM 可用的 URL ，否则返回的路径不能直接使用；
夜神模拟器或其他模拟器可以先用模拟器自带的相机功能测试，是否可以正常拍照存储，如果不能建议使用真机或android studio的自带模拟器测试程序。

以下为实现拍照和图库图片选择并正确显示的步骤：

（一）实现步骤

建立工程：

cpp 复制代码

cordova create myCamera org.myg.myCamera myCamera
cd myCamera
cordova platform add android
cordova plugin add cordova-plugin-camera
cordova plugin add cordova-plugin-file

正确完成后环境如下：

（二）源码

index.html源码：

cpp 复制代码

<body>
    <div class="app">
        <button id="takePicture">拍照</button>
        <button id="showPhotograph">图库</button>
        <img id="myImage">

    </div>
    <script src="cordova.js"></script>
    <script src="js/index.js"></script>
</body>

js\index.js源码：

cpp 复制代码

document.addEventListener('deviceready', onDeviceReady, false);

function onDeviceReady() {

    console.log(navigator.camera);
    var options;
	document.getElementById("takePicture").addEventListener("touchend", function () {
        alert("take picture"); 
        options = setOptions(Camera.PictureSourceType.CAMERA)
        navigator.camera.getPicture(onSuccess, onFail, options);
 	});
     //Use from Library
	document.querySelector("#showPhotograph").addEventListener("touchend", function () {
        options = setOptions(Camera.PictureSourceType.PHOTOLIBRARY)
        navigator.camera.getPicture(onSuccess, onFail, options);

	});

     function setOptions(srcType) {
        var options = {
            // Some common settings are 20, 50, and 100
            quality: 50,
            destinationType: Camera.DestinationType.FILE_URI,
            // In this app, dynamically set the picture source, Camera or photo gallery
            sourceType: srcType,
            encodingType: Camera.EncodingType.JPEG,
            mediaType: Camera.MediaType.PICTURE,
            correctOrientation: true
        }
        return options;
    }
     function onSuccess(imageURI) {
        window.resolveLocalFileSystemURL(imageURI, (entry) => {
            let img = document.getElementById('myImage');
            img.src = entry.toURL();
        }, onFail);
    }
    
    function onFail(message) {
        alert('拍照失败: ' + message);
    }

}

css\index.css源码：

cpp 复制代码

#myImage {
    margin-top: 10px;
    /* filter: sepia(100%); */
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    max-height: 300px;
}
button {
    padding: 10px;
    margin: 10px;
    width: 80%;
    font-size: 1em;

}