最近公司接到一个项目，要求对船员信息进行录入，其中包括船员证，身份证，以及人脸信息，要求按照一定的大小进行拍摄，并压缩上传，笔者在此处也是踩到了诸多的坑，故记录自己的开发思路。项目开发用的是uni-app，和原生小程序其实差不多，只是这个框架可以实现一端开发，多端运行打包发布，具体知识请自行百度，实现的效果如下：
身份证拍摄
人脸拍摄
方案一：拿到需求最开始，想的是用一张中间透明的背景图，将相机放在最透明区域，这样就可以实现了，但是后来发现，不同的手机分辨率不同，那么相机的大小和位置也会发生变化，不能实现准确的定位相机，所以很快抛弃了这种想法。
方案二：在顶部堆一个盒子，相机的两边个写一个自适应的盒子，在相机的底部写一个盒子，刚好将相机嵌在中间，可以实现了，但是发现不同的手机存在兼容性问题，部分手机会显示出盒子的边框，很丑，很快又放弃了这种做法。
在这个过程中由于对照片要按一定大小拍摄，所以调原生的相机肯定不行，调研发现通过小程序的api，调相机可行。在这个过程中出现了一个坑，就是图片压缩，在压缩的时候调用了wx.compressImage(OBJECT),没想到上线后针对不同的机型，这个函数在锤子手机上竟然不支持，报错说不是一个函数。无奈又只得换一个压缩方式，决定采用canvas绘制；结果又出现坑，每次拍摄完成，图片都被发大了，最终逐一排查解决了这个坑。
最终方案如下：
1)、静态页面
切换摄像头拍照温馨提示请授权相机拍照功能取消设置说明：由于图片压缩采用的canvas绘制的，所以要有canvas的承载容器，这个canvas标签不能隐藏，否则压缩会失败，为了不影响页面，可以通过定位将canvas移动到屏幕的远处去，canvas的长宽设置为拍照需求的图片大小，不设置最终图片会被缩放，我这里要求是width:300px;height:190px。
2)、样式文件：
3)、js文件：
