Ionic调用摄像头拍照和选择图库照片功能的注意点

代码示例

$scope.takePhoto=function(){
    var options = {
                                                                 //这些参数可能要配合着使用,比如选择了sourcetype是0,destinationtype要相应的设置
        quality: 100,                                            //相片质量0-100
        destinationType: Camera.DestinationType.FILE_URI,        //返回类型:DATA_URL= 0,返回作为 base64 編碼字串。 FILE_URI=1,返回影像档的 URI。NATIVE_URI=2,返回图像本机URI (例如,資產庫)
        sourceType: Camera.PictureSourceType.CAMERA,             //从哪里选择图片:PHOTOLIBRARY=0,相机拍照=1,SAVEDPHOTOALBUM=2。0和1其实都是本地图库
        allowEdit: false,                                        //在选择之前允许修改截图
        encodingType:Camera.EncodingType.JPEG,                   //保存的图片格式: JPEG = 0, PNG = 1
        targetWidth: 200,                                        //照片宽度
        targetHeight: 200,                                       //照片高度
        mediaType:0,                                             //可选媒体类型:圖片=0,只允许选择图片將返回指定DestinationType的参数。 視頻格式=1,允许选择视频,最终返回 FILE_URI。ALLMEDIA= 2,允许所有媒体类型的选择。
        cameraDirection:0,                                       //枪后摄像头类型:Back= 0,Front-facing = 1
        popoverOptions: CameraPopoverOptions,
        saveToPhotoAlbum: true                                   //保存进手机相册
    };

    $cordovaCamera.getPicture(options).then(function(imageData) {
        CommonJs.AlertPopup(imageData);
        var image = document.getElementById('myImage');
        image.src=imageData;
        //image.src = "data:image/jpeg;base64," + imageData;
    }, function(err) {
        // error
        CommonJs.AlertPopup(err.message);
    });

};

①如果要保存照片,需要设置destinationType是返回图像路径,然后设置saveToPhotoAlbum: true,这两个参数都设置才能保存照片,我发现如果设置了长和宽保存的照片质量会很差,去掉的画质量不错。但我android会默认存到
file://storage/sdcard0/Pictures中,我手机相册没识别出来。而且这个时候虽然设置allowEdit: true,但是返回来的是源文件的路径,这个剪裁功能等于没有用。
②如果要截取图片,要设置allowEdit: true,设置长和宽,并且destinationType返回的是base64位编码字符串。
③当设置sourceType: Camera.PictureSourceType.CAMERA时,这个时候的选择图库的界面很难看,需要设置sourceType为0或者2这个时候调用的就是系统的图库,好看点。所以我们实现拍照,然后在拍照的成功回调中调用打开相册选择图片,效果会好一点。
④长和宽的设置只影响剪裁框的大小,也就是如果返回base64会影响图片的大小,返回uri不会影响。
⑤有可能会出现base64上传后图片自动旋转90度的问题,correctOrientation设置true即可

cordova-plugin-camera 插件说明文档

中文文档:http://www.jianshu.com/p/184f9d704c71

英文文档:https://www.npmjs.com/package/cordova-plugin-camera#camerapopoveroptions

要在 Ionic React 中调用原生指纹功能,可以使用 Capacitor 插件,该插件提供了访问设备本地功能的 API。 以下是一个示例,展示了如何使用 Capacitor 插件在 Ionic React 中调用原生指纹功能: 首先,需要安装 Capacitor 插件: ``` npm install @capacitor/core @capacitor/fingerprint ``` 然后,在 `src/index.tsx` 文件中初始化 Capacitor: ```javascript import { Capacitor } from '@capacitor/core'; if (Capacitor.isPluginAvailable('Fingerprint')) { // 插件可用 } else { // 插件不可用 } ``` 接下来,在需要调用指纹功能的组件中,使用 Capacitor 插件的 `Fingerprint` API: ```javascript import { Plugins } from '@capacitor/core'; import React, { useState } from 'react'; const { Fingerprint } = Plugins; function App() { const [message, setMessage] = useState(''); async function authenticate() { try { const result = await Fingerprint.authenticate(); if (result.success) { setMessage('Authentication successful'); } else { setMessage('Authentication failed'); } } catch (error) { console.error(error); setMessage('Authentication failed'); } } return ( <div> <button onClick={authenticate}>Authenticate</button> <p>{message}</p> </div> ); } export default App; ``` 在这个示例中,我们使用 Capacitor 的 Fingerprint API 来调用原生指纹功能。在 authenticate 方法中,我们调用 Fingerprint.authenticate 方法,并根据返回的结果更新 message 状态。 请注意,使用 Capacitor 插件需要进行一些配置,如在 `android/app/src/main/AndroidManifest.xml` 文件中添加权限声明等。具体细节可以参考 Capacitor 的官方文档。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值