create at 2021年10月11日 19:13:04
modify at 2021.10.12

项目一直使用uniapp开发的，我接手后也只能使用这套方案；

最近接到一个新功能，就是全屏拍摄，类似微信中的拍摄功能；此功能强制只能拍摄，不能从相册取图片。

虽然 wx.chooseImage(Object object) 可以选择从相册或者从摄像头取图片，但是，此API在有些手机上失效；所以，弃用此方案。

一开始我选择使用 uni-popup ，弹出层；通过样式将其设置为全屏，然后在这个弹出层中打开摄像头；遇到一些问题，都依次解决了；但最终还是放弃此方案了（折腾了很久，可能因为uni-popup中的样式问题吧，图标显示不出来）

• 这个是 camera 组件，拍摄使用 wx.createCameraContext；另外， cover-view , cover-image 是用来在拍摄层上添加按钮或图标的；
• （1）cover-view 不显示，添加 z-index 可以解决；
• （2）没法关闭摄像头，uni-popup 可以 close，但是弹出层关闭了，摄像头还在；解决办法是使用data变量来控制摄像头的显示与隐藏，<camera v-if="flagShowCamera" 弹出层关闭时，将 flagShowCamera 设为 false；
• （3）cover-image 不显示，这个问题折腾了很久，图片总是不显示；没办法只能放弃 uni-popup 弹出层方案。

于是，我选择创建一个新的page页面，来做全屏拍摄；使用一个单独page页面，上面的问题就都没有了（这也表示：uni-popup 确实会影响 camera 等微信组件的正常使用）。但又遇到新的问题

• 拍摄后会得到一个 wxfile://tmp_78b87cad87ad27beab102881a9dc68d0.jpg 这样的地址，但是返回到上一页后，这个地址就失效了；仿佛这个地址只在摄像头（camera）没有销毁时存在。
• 解决办法好像只能是：在返回上一页前，将图片上传到服务器。但是，结合当前业务，这样会产生很多冗余的图片。
• 根据上面的推测，我使用wx.saveFile 将图片保存到本地（结果发现，只是一场乌龙）

wxfile://tmp_78b87cad87ad27beab102881a9dc68d0.jpg 可以直接赋值给 image 的 src 属性的，也不存在 camera 销毁，临时图片就消失的现象；上面几处描述是错误的，已经添加删除线。

• 因为程序中的逻辑不严谨，导致低级错误，我一开始的怀疑都是错的；
• 也不需要 wx.saveFile 来转存到本地，直接拍摄后将得到的临时文件赋值给 image 的 src 属性就可以显示出刚刚拍摄的图片了。

至此，全屏拍摄就完成了，以上是开发过程的记录。字节跳动的双色图标是真的好用，推荐下。