当前位置: 代码迷 >> 综合 >> Cordova 学习笔记二
  详细解决方案

Cordova 学习笔记二

热度:28   发布时间:2023-12-08 17:44:37.0

调用相机拍照并将图片保存到相册中

添加插件

cordova plugin add cordova-plugin-file    --文件操作插件
corodva plugin add cordova-plugin-camera  --拍照操作插件

.html文件中添加cordova.js的引用

这里写图片描述

图(1)

注意cordova.js文件与.html文件的相对位置

添加调用方法

function getPicture() {
     var options = {quality: 50,destinationType: Camera.DestinationType.FILE_URI,sourceType: Camera.PictureSourceType.CAMERA,encodingType: 0,mediaType: 0}navigator.camera.getPicture(onSuccess, onFail, options);function onSuccess(imageURI) {
    // 拍照后将图片保存到相册中 window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fs) {
    function copy(currDir, srcEntry, dirName) {
    currDir.getFile(srcEntry, {}, function(fileEntry) {
    currDir.getDirectory(dirName, {}, function(dirEntry) {
    fileEntry.copyTo(dirEntry);}, function(){
    });}, function(){
    });}//copy(fs.root, 'test.jpg', 'DCIM/Camera/');/** imageURI 返回路径为 file:///storage/emulated/0/Android/data/....而此处实际需要的路径为 Android/data/.....故对imageURI进行了截取 */copy(fs.root, imageURI.substring(27), 'DCIM/Camera/');}, function(){
    });$("#img").attr("src",imageURI);}function onFail(message) {
    }
}

2017-09-21 补充
上述代码中为了将相机拍的图片保存到相册中,使用了cordova-plugin-file插件将图片拷贝到指定目录下,虽然上述代码实现了将图片保存到相册对应的文件中,但却无法再相册中直接显示。查阅cordova-plugin-camera插件文档发现,通过设置getPicture()option参数的saveToPhotoAlbum属性值为true,可以使相机拍摄的图片保存到相册中并可以直接查看


设置返回的图片路径

常量名 类型 默认值 描述
Camera.DestinationType.DATA_URL 数值 0 返回一个基于base64编码后的字符串
Camera.DestinationType.FILE_URI 数值 1 返回一个文件url
Camera.DestinationType.NATIVE_URI 数值 2

设置图片来源

常量名 类型 默认值 描述
Camera.PictureSourceType.CAMERA 数值 1 从相机获取
Camera.PictureSourceType.PHOTOLIBRARY 数值 0 从图库获取
Camera.PictureSourceType.SAVEDPHOTOALBUM 数值 2 从图库获取

显示图片

destinationType=Camera.DestinationType.DATA_URL

<img src="data:image/jpeg;base64,imageURI" />

destinationType=Camera.DestinationType.FILE_URI

<img src="imageURI" />

此处的imageURI为getPicture()回调onSuccess()时的方法参数

Android 持久化存储路径设置

在项目根目录下的config.xml文件中添加如下配置

<preference name="AndroidPersistentFileLocation" value="Compatibility" />

AndroidPersistentFileLocation可选的值为InternalCompatibility

Without this line, the File plugin will use Internal as the default. If a preference tag is present, and is not one of these values, the application will not start.

If your application has previously been shipped to users, using an older (pre- 3.0.0) version of this plugin, and has stored files in the persistent filesystem, then you should set the preference to Compatibility if your config.xml does not specify a location for the persistent filesystem. Switching the location to “Internal” would mean that existing users who upgrade their application may be unable to access their previously-stored files, depending on their device.

If your application is new, or has never previously stored files in the persistent filesystem, then the Internal setting is generally recommended.

若config.xml文件中不存在name=AndroidPersistentFileLocationpreference标签,则cordova-plugin-file插件会将Internal当做AndroidPersistentFileLocation的默认值。
若config.xml文件中存在preference标签,但其对应的值不在InternalCompatibility这两者之间,这应用将无法启动。
若应用利用cordova-plugin-file3.0之前的版本,且用户已在持久化文件系统中存储了文件,如果没有在config.xml文件中指定一个持久化文件系统中的路径则应该设置name=Compatibility的preference 标签。选择Internal类型的路径意味着现存的用户更新应用后可能导致无法访问他们之前存储的文件,当然,这也依赖于他们的设备。

如果应用是新的或之前从未在持久化文件系统中存储文件,则推荐使用Internal

异常处理

在添加cordova-plugin-camera插件时报如下错误:

Failed to install 'cordova-plugin-camera': CordovaError: Version of installed pl
ugin: "cordova-plugin-compat@1.0.0" does not satisfy dependency plugin requireme
nt "cordova-plugin-compat@^1.1.0". Try --force to use installed plugin as depend
ency.

解决方式:

cordova plugin remove --force cordova-plugin-compat
cordova plugin add cordova-plugin-compat

执行完上面的两条命令后在执行

cordova plugin add cordova-plugin-camera

参考资料

http://blog.csdn.net/salonzhou/article/details/28275713

  相关解决方案