组件模式自定义布局相机原生插件拍照返回图片地址或BASE64

更新记录

1.0.0（2020-09-23）

发布

平台兼容性

Android	Android CPU类型	iOS
√	armeabi-v7a：未测试，arm64-v8a：未测试，x86：未测试	√

原生插件通用使用流程：

购买插件，选择该插件绑定的项目。
在HBuilderX里找到项目，在manifest的app原生插件配置中勾选模块，如需要填写参数则参考插件作者的文档添加。
根据插件作者的提供的文档开发代码，在代码中引用插件，调用插件功能。
打包自定义基座，选择插件，得到自定义基座，然后运行时选择自定义基座，进行log输出测试。
开发完毕后正式云打包

付费原生插件目前不支持离线打包。
Android 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/android
iOS 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/ios

注意事项：使用HBuilderX2.7.14以下版本，如果同一插件且同一appid下购买并绑定了多个包名，提交云打包界面提示包名绑定不一致时，需要在HBuilderX项目中manifest.json->“App原生插件配置”->”云端插件“列表中删除该插件重新选择

说明

1、该插件为组件型原生插件，只提供相机的预览界面和api核心功能，开发者可以根据自己需求更灵活的进行UI布局。 2、插件预览界面大小、位置可以自定义，可以通过css或 cover-view等组件结合为丰富样式。 3、使用该插件需要在nvue下使用。 4、拍照过程自动对焦、自动闪光灯。 5、拍照返回结果有本地文件路径和base64字符串两种方式。

使用组件

在nvue页面中加入标签

<huihui-Camera ref='myComponent' width=300 height=400 :style="{width:300,height:400}" > </huihui-Camera>

预览的宽和高可以采用变量，为数值。

打开摄像头预览

this.$refs.myComponent.startPreview(object,callBack)

object 对象参数

参数	类型	默认值	说明
cameraId	数值	0	相机镜头 1-前置 0-后置

callBack 回调

参数	类型	默认值	说明
code	数值		预览结果编码: 0 成功 -1 失败
msg	字符串		预览结果描述

注意： android调用之前请进行权限申请判断，以防止首次使用时没有权限，参照示例。

切换镜头

this.$refs.myComponent.switchCamera()

拍照

this.$refs.myComponent.takePhoto(object,callBack)

object 对象参数

参数	类型	默认值	说明
outputMode	数值	0	输出方式: 1 保存本地并返回本地路径 0 返回照片base64码
savePath	字符串		如果outputMode为1时,该参数需要提供，为本地文件目录绝对地址

callBack 回调

参数	类型	说明
code	数值	拍照结果编码: 0 成功 -1 失败
msg	字符串	拍照结果描述
data	字符串	当outputMode=1时为照片本地绝对路径当outputMode=0时为照片 base64编码

关闭预览

this.$refs.myComponent.stopPreview();

示例

标签

<huihui-Camera  ref='myComponent' :width="width" :height="height" v-bind:style="{width:width,height:height}"></huihui-Camera>

变量


const systeinfo=uni.getSystemInfoSync();
this.width=systeinfo.screenWidth;
this.height =systeinfo.screenHeight;

预览

if( uni.getSystemInfoSync().platform=='android'){
                getApp().globalData.requestAndroidPermission('android.permission.CAMERA')
                .then((result)=>{
                    if(result==1){
                        this.$refs.myComponent.startPreview({cameraId:0},(res)=>{
                            console.log(res);
                        }); 
                    }           
                });
            }else{
                this.$refs.myComponent.startPreview({cameraId:0},(res)=>{
                    console.log(res);
                    uni.showToast({
                        title:res.msg
                    });
                }); 
            }

切换镜头

this.$refs.myComponent.switchCamera();

拍照

方式一： 
const dir="_doc/pic";
let path = plus.io.convertLocalFileSystemURL(dir);
this.$refs.myComponent.takePhoto({
    outputMode:0,
    },(res)=>{ 
     if(res.code!=0){
         uni.showToast({
            title:res.msg
         })
         return;
     }
     console.log(res)  
});

方式二：

`
const dir="_doc/pic";
let path = plus.io.convertLocalFileSystemURL(dir);
this.$refs.myComponent.takePhoto({
    savePath:path,
    outputMode:1,
    },(res)=>{ 
     if(res.code!=0){
         uni.showToast({
            title:res.msg
         })
         return;
     }  
     console.log(res);

});

关闭预览

this.$refs.myComponent.stopPreview();