更新记录

1.0.0（2025-10-29） 下载此版本

1. 自定义拍照模板插件

平台兼容性

uni-app(4.76)

uni-app x(4.76)

chan-uts-camera

自定义项目模板UTS插件

介绍

Uniapp 调用 camerautils-release.aar 拍照返回 BASE64

软件架构

无

代码示例

<template>
    <view>
        <text class="title">{{title}}</text>
          <view class="button-container">
              <button @click="onTakePhoto">拍照</button>
          </view>
        <view class="">
            <image :src="img"></image>
        </view>
    </view>
</template>

<script>
    import {takepic}  from '@/uni_modules/chan-uts-camera'  
    export default {
        data() {
            return {
                title: '自定义相机拍照模板',
                msg:"",
                img: ""  as string  // 明确指定类型
            }
        },
        onShow() {
            // 每次页面显示时检查是否有保存的图片
            const savedImage = uni.getStorageSync('lastTakenPhoto');
            if (typeof savedImage === 'string' && savedImage.length > 0) {
                this.img = savedImage as string;
                uni.removeStorageSync('lastTakenPhoto');
            }
        },
        onUnload() {
            uni.$off('updateImage');
        },
        onLoad() {
        },
        methods: {
            onTakePhoto() {
                takepic({
                    paramA: false,
                    complete: (res) => {
                        this.img = "data:image/jpeg;base64," + res; 
                          // 保存到本地存储
                        uni.setStorageSync('lastTakenPhoto', this.img);
                        uni.navigateTo({
                            url: '/pages/index/index' // 拍完照跳转回的路径页面
                        });
                    }
                });

            },
        }
    }
</script>

<style>
    .logo {
        height: 100px;
        width: 100px;
        margin: 100px auto 25px auto;
    }
.button-container {
  display: flex;
  flex-direction: column;
}
.my-button {
  margin-bottom: 20rpx;
}
/* 最后一个按钮不需要下边距 */
.my-button:last-child {
  margin-bottom: 0;
}
    .title {
        font-size: 18px;
        color: #8f8f94;
    text-align: center;
    }
</style>

安装教程

1. 直接引入Uniapp 项目即可

使用说明

1. 插件目录结构

2. config.json配置

   {
   "minSdkVersion": "21",
   "dependencies": [
       "androidx.recyclerview:recyclerview:1.0.0",
       "androidx.core:core:1.10.1",
       "androidx.camera:camera-core:1.3.0",
       "androidx.camera:camera-camera2:1.3.0",
       "androidx.camera:camera-lifecycle:1.3.0",
       "androidx.camera:camera-view:1.3.0"
   ]
   }

3. package.json

   {
   "id": "chan-uts-camera",
   "displayName": "chan-uts-camera",
   "version": "1.0.0",
   "description": "chan-uts-camera ***@qq.com",
   "keywords": [
       "chan-uts-camera"
   ],
   "repository": "",
   "engines": {
       "HBuilderX": "^3.6.8",
       "uni-app": "^3.1.0",
       "uni-app-x": "^3.1.0"
   },
   "dcloudext": {
       "type": "uts",
       "sale": {
           "regular": {
               "price": "0.00"
           },
           "sourcecode": {
               "price": "0.00"
           }
       },
       "contact": {
           "qq": ""
       },
       "declaration": {
           "ads": "",
           "data": "",
           "permissions": ""
       },
       "npmurl": "",
       "darkmode": "-",
       "i18n": "-",
       "widescreen": "-"
   },
   "uni_modules": {
       "dependencies": [],
       "encrypt": [],
       "platforms": {
           "cloud": {
               "tcb": "-",
               "aliyun": "-",
               "alipay": "-"
           },
           "client": {
               "uni-app": {
                   "vue": {
                       "vue2": "-",
                       "vue3": "-"
                   },
                   "web": {
                       "safari": "-",
                       "chrome": "-"
                   },
                   "app": {
                       "vue": "-",
                       "nvue": "-",
                       "android": "-",
                       "ios": "-",
                       "harmony": "-"
                   },
                   "mp": {
                       "weixin": "-",
                       "alipay": "-",
                       "toutiao": "-",
                       "baidu": "-",
                       "kuaishou": "-",
                       "jd": "-",
                       "harmony": "-",
                       "qq": "-",
                       "lark": "-"
                   },
                   "quickapp": {
                       "huawei": "-",
                       "union": "-"
                   }
               },
               "uni-app-x": {
                   "web": {
                       "safari": "-",
                       "chrome": "-"
                   },
                   "app": {
                       "android": "-",
                       "ios": "-",
                       "harmony": "-"
                   },
                   "mp": {
                       "weixin": "-"
                   }
               }
           }
       }
   }
   }

4. 运行效果

5. 返回示例

注意