zoukankan      html  css  js  c++  java
  • 使用cordova,使html5也能像IOS,Android那样可以 调取手机的相机拍照功能

    一,我们在使用html5的技术开发手机app时,并不能像IOS,Android那样可以调取手机原生的相机功能,这是我们就要借助一些插件来时实现。

    二,安装Cordoba的相机插件

    1、在文件目录下,使用命令安装相机插件,命令如下:

    cordova plugin add cordova-plugin-camera

     2、使用”camera.getPicture“函数来调取相机

    camera.getPicture(successCallback, errorCallback, options)
    successCallback相机调取成功的回调函数。
    errorCallback相机调取失败的回调函数。
    options:相机参数设置。参数如下表:
    名称类型默认描述
    质量 number 50 保存的图像的质量,表示为0-100的范围,其中100通常是全分辨率,没有文件压缩损失。(请注意,关于相机分辨率的信息不可用。)
    destinationType DestinationType FILE_URI 选择返回值的格式。
    sourceType的 PictureSourceType CAMERA 设置图片的来源。
    allowEdit Boolean true 选择前允许简单编辑图像。
    编码类型 EncodingType JPEG 选择返回的图像文件的编码。
    targetWidth number   以像素为单位的缩放图像的宽度 必须与...一起使用targetHeight长宽比保持不变。
    targetHeight number   以像素为单位的高度缩放图像。必须与...一起使用targetWidth长宽比保持不变。
    媒体类型 MediaType PICTURE 设置要从中选择的媒体类型。只有当作品PictureSourceTypePHOTOLIBRARY或者SAVEDPHOTOALBUM
    correctOrientation Boolean   捕捉期间旋转图像以纠正设备的方向。
    saveToPhotoAlbum Boolean   捕获后将图像保存到设备上的相册中。
    popoverOptions CameraPopoverOptions   指定iPad中弹出位置的仅iOS选项。
    cameraDirection Direction BACK 选择要使用的相机(正面或背面)。

    相机参数配置属性如下:

    Camera.DestinationType (文件类型):属性值如下,

    NameTypeDefaultDescription
    DATA_URL number 0 返回base64编码的字符串。数据URL可能会占用大量内存,导致应用程序崩溃或内存不足错误。如果可能,请使用FILEURI或NATIVE_URI
    FILE_URI number 1 返回文件uri(内容:// media / external / images / media / 2 for Android)
    NATIVE_URI number 2 返回本地uri(例如,asset-library://... for iOS)

    Camera.EncodingType (图片类型设置): 属性值如下,

    NameTypeDefaultDescription
    JPEG number 0 返回JPEG编码的图像
    PNG number 1 返回PNG编码的图像

    Camera.MediaType(媒体类型设置) : 属性值如下,

    NameTypeDefaultDescription
    PICTURE number 0 只允许选择静止图像。默认。将返回通过DestinationType指定的格式
    VIDEO number 1 只允许选择视频,只返回网址
    ALLMEDIA number 2 允许从所有媒体类型中选择

    Camera.PictureSourceType (图片来源设置): 属性值如下,

    NameTypeDefaultDescription
    PHOTOLIBRARY number 0 从图片库中选择图片(与Android的SAVEDPHOTOALBUM相同)
    CAMERA number 1 从相机拍照
    SAVEDPHOTOALBUM number 2
    从图片库中选择图片(与Android的PHOTOLIBRARY相同)

    Camera.PopoverArrowDirection(匹配iOS UIPopoverArrowDirection常量以指定弹出窗口上的箭头位置。) : 属性值如下,

    NameTypeDefault
    ARROW_UP number 1
    ARROW_DOWN number 2
    ARROW_LEFT number 4
    ARROW_RIGHT number 8
    ARROW_ANY number 15

    Camera.Direction (相机摄像头设置): 属性值如下,

    NameTypeDefaultDescription
    BACK number 0 使用背面照相机
    FRONT number 1 使用前置摄像头

     例子:

    // 打开相机
        openCamera: function (selection) {
            var srcType = Camera.PictureSourceType.CAMERA;  // 只能从相机里取
            var cameraOptions = uploadCtrl.setOptions(srcType);  // 配置参数函数
            navigator.camera.getPicture(uploadCtrl.cameraSuccess, uploadCtrl.cameraError, cameraOptions);
        },
        // 从相册获取图片
        openFilePicker(selection){
            var srcType = Camera.PictureSourceType.SAVEDPHOTOALBUM;
            var pickerOptions = uploadCtrl.setOptions(srcType);
            navigator.camera.getPicture(uploadCtrl.cameraSuccess, uploadCtrl.cameraError, pickerOptions);
        },
        // 相机调取成功成功
        cameraSuccess(imageUri){
            // console.log('调取成功')
            uploadCtrl.createImg(imageUri);
        },
        // 相机调取失败
        cameraError(error){
            $$('.page[data-page="upload"] .imgUpload-overlay').removeClass('imgUpload-overlay-active'); // 选择器打开,遮罩层打开
            var obj =$$('.page[data-page="upload"]').find('.'+uploadCtrl.imgType);
            var index = uploadCtrl.imgType.substr(4);
            uploadCtrl.uploadTypeCondition[index].hasImg = false;
            obj.find('.img-item').removeClass('no');   // 上传模块隐藏
            obj.find('.has-img').addClass('no');  
            if(error !=='Camera cancelled.' && error !=='no image selected' && error !=='Selection cancelled.'){  // 相机取消
                myApp.alert('<span class="alertTip">'+error+'</span>',['']);
            }
        },
        // 相机参数配置
        setOptions(srcType){
            var options = {
                quality: 60,
                destinationType: Camera.DestinationType.FILE_URI,//图片的base64编码
                sourceType: srcType,
                encodingType: Camera.EncodingType.jpg,
                mediaType: Camera.MediaType.PICTURE,
                allowEdit: false,
                correctOrientation: true, //Corrects Android orientation quirks
                saveToPhotoAlbum:false,  // 不允许保存
            };
            return options;
        },
  • 相关阅读:
    30 algorithm questions study
    Binary Tree: Write a function to return count of nodes in binary tree which has only one child.
    分布式排序
    android开发中,工程前面有感叹号的解决办法
    android导入工程出现红色感叹号
    INSTALL_FAILED_MISSING_SHARED_LIBRARY错误解决方法
    安卓手机铃声怎么设置
    如何开启Mysql远程访问
    android 链接mysql数据库
    android 连接mysql数据库问题
  • 原文地址:https://www.cnblogs.com/zuoan-oopp/p/8006778.html
Copyright © 2011-2022 走看看