# 自定义相机 # 起因 > 由于最近用uniapp调用原生相机容易出现闪退问题，找了很多教程又是压缩图片又是优化代码，我表示并没有太大作用!! > - > 于是开启了我的解决之路 > - 利用`livePusher`实现 # 实现自定义相机 > 拓展性挺强的,可以实现自定义水印、身份证拍摄、人像拍摄等 > 这里我简单实现一个相机功能主要用于解决闪退 `Tip：这里需要创建nvue文件哦~` 创建`camera.nvue` ```cpp ``` 这里用了一些图片作为图标布局画面美观，例如返回图标，拍摄图标 ## 使用 > 在点击拍照的时候跳转到`camera页面`即可 > 在需要使用的页面中编写`setImage`方法,即可拿到返回过来的图片临时路径 > 再通过uniapp自带的上传图片api进行上传至服务器即可 > 这样就避免了调用原生相机 ```js setImage(e){ //e.path即是图片临时路径 uni.uploadFile({ url: '上传接口的路径', filePath: e.path, name: 'imageFile', success: function(res) { //服务器返回的图片地址url }, error: function(err) { console.log(err) } } ``` ### 效果图 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ce21c2f7526b4de2b4a9d43d39e7560e~tplv-k3u1fbpfcp-zoom-1.image) # 拓展 > 如果既要实现从相册选又要手机拍呢？该如何实现 > 这里相册选调用的uniapp的api， > 手机拍跳转到自定义相机页面即可这里可以写一个弹窗，让它选择，如果选择了从相册选图片则 ```cpp uni.chooseImage({ count: size, //默认9 sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有 sourceType: ['album'], //从相册选择 success: function (res) { console.log(res)//拿到临时路径再向后端发送上传请求.... } }); ``` 如果用相机拍则跟上方步骤一致 # 实现多种自定义相机这里的话我贴上效果图，如果需要就在我的博客资源中获取吧 ## 水印相机 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/96038f7811ba4a1f931c271cc44ccb04~tplv-k3u1fbpfcp-zoom-1.image) ## 身份证相机 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7617d4efdc8f4e6f83bee0c563161a7e~tplv-k3u1fbpfcp-zoom-1.image) ## 人像相机 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a737b6726ed6462f930a9f89e86532b7~tplv-k3u1fbpfcp-zoom-1.image) 这样我就成功解决了闪退问题~，有问题评论区d我