每日动态!记录一次小程序中讨厌的拍照上传的优化

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

每日动态!记录一次小程序中讨厌的拍照上传的优化

2023-04-06 17:10:57 来源：博客园

背景

工作中出现了一个业务，需要用户拍照并上传base64格式的图片内容供后台识别。项目并非从零开始，一通配置后跑了起来。自测了一会，下班时间到，开溜。

就在回家路上，打开手机分享图片时傻眼了，相册里全是自测的时候拍摄的照片，感到不舒服，这个项目之前据说已经交付过，我觉得用户肯定和我一样不舒服。

(资料图片仅供参考)

就这样

折腾劲来了~

目标

这次要折腾的目标很明确： 不影响逻辑(已有的代码能不动就不动)、不能再保存拍摄过的照片到相册中。

调研结果

现有代码中通过调用wx.chooseMedia来进行拍照上传，微信小程序没有相关配置项，是否保存到相册等等。所以要改用其他的api来实现： 借助camera元素及其api

实现

新建一个page，在wxml中插入camera元素及拍摄按钮，还可以放置其他必要的元素，例如提示框等;
声明一个page的方法，例如getCameraContent用来获取camera相机内容，将此方法绑定到拍摄按钮中;

代码案例：

// wxml

// page.jsgetCameraContent() {    return new Promise((resolve) => {      const cameraContext = wx.createCameraContext();      cameraContext.takePhoto({        quality: "high",        success: (res) => {          resolve(res.tempImagePath);        }      })    })  }

这样在调用getCameraContent().then()时就会拿到微信提供的本地临时路径，后续转换为Base64通过接口发送即可。其他地方逻辑并没有改变，只是改变了从点击上传到调用上传接口之间的逻辑。

这里通过新建页面的方式来实现，因为在之前wx.chooseMedia调用时，会出现相机全屏的行为，我们新方案给了个新页面，行为一致，对用户影响较小。初次之外还可以在页面中插入一些自定义内容，定制化方面很友好。

为什么要改？

我们在微信拍照时通常都是身份证、人脸、银行卡等一些敏感信息，此类信息在处理时更应该注意安全。

关键词：