uniapp 小程序 拍照 回放

### 如何在 UniApp 小程序中实现拍照并回放照片或视频的功能 #### 使用 Camera 组件拍摄照片和录制视频 为了实现在 UniApp 中拍照以及录像，可以利用 `camera` 组件。通过设置不同的属性值控制其行为模式，比如设定为拍摄影像或是静态图像。 ```html <template> <view class="content"> <!-- 拍照按钮 --> <button type="primary" @click="takePhoto">拍照</button> <!-- 录制视频按钮 --> <button type="warn" @click="startRecord">开始录制</button> <button v-if="isRecording" type="default" @click="stopRecord">停止录制</button> <!-- 显示媒体文件 --> <image :src="photoPath"></image> <video :src="videoPath" controls></video> <!-- 相机组件 --> <camera device-position="back" flash="off" binderror="error" style="width:100%; height:300px;"></camera> </view> </template> <script> export default { data() { return { photoPath: '', videoPath: '', isRecording: false, ctx: null } }, onLoad() { this.ctx = uni.createCameraContext() }, methods: { takePhoto() { const that = this; this.ctx.takePhoto({ quality: 'high', success(res) { that.photoPath = res.tempImagePath; } }); }, startRecord() { this.isRecording = true; this.ctx.startRecord({ success(res) { console.log('Start recording'); } }); }, stopRecord() { const that = this; this.ctx.stopRecord({ success(res) { that.videoPath = res.tempVideoPath; that.isRecording = false; } }); } } } </script> ``` 上述代码展示了如何创建一个简单的界面用于触发摄像头操作，并处理返回的结果路径以便后续显示给用户[^1]。 #### 处理获取的照片或视频数据 当成功捕获到一张新图片或者完成一段影片录制之后，会得到临时存储位置的信息（即 tempFilePath）。这些资源可以通过 `<image>` 或者 `<video>` 标签直接展示出来供查看；如果想要进一步保存至本地相册，则需调用相应的 API 函数如 `uni.saveImageToPhotosAlbum()` 和 `uni.saveVideoToPhotosAlbum()` 来执行保存动作[^2]。 #### 添加额外功能增强用户体验 对于更复杂的需求场景来说，在基本功能之上还可以考虑加入更多交互设计来提升整体体验感： - **预览效果调整**：允许用户裁剪、旋转所选素材； - **滤镜特效应用**：集成第三方库提供丰富的视觉变换选项； - **分享社交平台**：简化流程让用户轻松上传作品至各大网络社区； - **压缩优化传输**：减少体积加快加载速度的同时保持画质清晰度不变。 以上提到的一些高级特性和工具可以在 qdpz-uniapp 项目里找到实际案例作为参考[^3]。