【uni-app x】告别系统相机限制!三端通用自定义相机组件:任意布局、静默拍照、录像、水印叠加、连拍回图一次搞定

【uni-app x】告别系统相机限制!三端通用自定义相机组件:任意布局、静默拍照、录像、水印叠加、连拍回图一次搞定

正文

为什么还要自己写相机?

开发 App 时你是不是也遇到过这些坑:

  • 系统相机界面固定,想加个自定义遮罩/水印/操作栏?做不到。
  • 业务需要静默拍照(不显示拍照瞬间、无快门声),系统相机根本不提供。
  • 巡检、打卡、取证类应用要在照片上叠加时间地点水印,只能拍完再拿 Canvas 硬拼,画质受损还麻烦。
  • 连拍、批量回图?更是无从下手。

uni-app x 插件市场里要么是"已淘汰"的旧原生插件,要么只支持单端。mj-custom-camera 就是冲着这个缺口来的。

它是什么?

一套基于 uni-app x + UTS 标准模式组件 开发的三端(Android / iOS / HarmonyOS)自定义相机插件,一次编写,三端运行,不依赖任何三方 SDK,纯原生能力封装。

功能清单

  • 📷 任意布局预览:相机画面嵌入自定义 UI,遮罩、网格线、操作按钮随意摆放
  • 🤫 静默拍照:支持无快门无提示抓拍,取证/打卡场景必备
  • 🎬 录像:带时长控制与实时预览
  • 💧 水印叠加:时间、地点、自定义文字一键合成进照片,原生级清晰度
  • ⚡ 连拍批量回图:一次触发连续抓拍,批量回调
  • 🔄 前后摄像头切换 + 闪光灯:基础能力全都有
  • 🧩 静态 API:可完全脱离组件,代码里直接调用

技术亮点(为什么它快且稳)

  • Android 基于 Camera2 API、iOS 基于 AVFoundation、鸿蒙基于 CameraKit,全是各平台官方原生能力,不走 WebView 中转
  • 水印直接在原生层合成,无二次压缩,画质无损
  • 拍照结果双写系统相册(Android 10+ MediaStore),图库立即可见
  • UTS 单包集成,无 AAR/SDK 冲突,随 uni_modules 一键引入

接入有多简单?

xml 复制代码
<!-- pages/index/index.uvue -->
<mj-custom-camera
	mode="photo"
	:watermark="{ enabled: true, text: '2026-09-27 阿克苏' }"
	@take="onTake"
	@error="onError">
</mj-custom-camera>
ts 复制代码
function onTake(path: string) {
	uni.showToast({ title: "拍照成功", icon: "none" })
	// path 即图片本地路径,可直接展示/上传
}

引入 uni_modules 后即可使用,标准基座即可体验,无需自定义基座。

兼容性

  • 仅支持 uni-app x(App 端)
  • Android 5.0+ / iOS 12+ / HarmonyOS
  • 权限自动申请,拍照结果自动入库

插件链接:https://ext.dcloud.net.cn/plugin?name=mj-custom-camera

如果你也被系统相机的各种限制折磨过,这个插件能帮你省下一整个原生开发的工期。觉得有用的话,点赞收藏,评论区聊聊你的场景。


相关推荐
行者全栈架构师5 小时前
【鸿蒙心迹】互动卡片全链路——把核心功能放到桌面(FormKit 实战)(HarmonyOS 7.x)
前端·算法·架构
java1234_小锋5 小时前
【技术专题】HTML5 网页技术 - HTML5 表单基础以及增强
前端·html·html5
燕落南枝5 小时前
HTML 学习:辅助标签 label 与字符实体
前端·学习·html
不简说5 小时前
AI 帮你画模板、点一下就云打印:sv-print 这三个月都干了啥
前端·javascript·人工智能
Amos_Web5 小时前
Rspack 源码解析(二十六):CssPlugin 与 CssChunkingPlugin 如何保证 CSS 顺序并切分 chunk
前端
孙浩君5 小时前
0行手写代码,我用AI做了一个打工人模拟器(含3D霓虹城市漫游)
前端·后端
夏天要喝冰可乐5 小时前
用 Codex 连接 Blender,我做了一块可以走进楼宇的大屏
前端·three.js
醒醒1116 小时前
从微信小程序到全端:一个安全扫描器的演进之路(v0.5.0 → v0.6.0)
前端·安全
seconp6 小时前
计算机毕设做什么项目?整理了 80 个 Web、小程序、AI 与数据方向
前端·小程序·课程设计
代码小学僧6 小时前
如何低成本部署网站?Vercel 和 Cloudflare 怎么选?
前端·后端·serverless