支付宝小程序camera组件取景框绘制

因公司需求，要将微信小程序转战到支付宝上面，恰好又是原生的写法，那只能迎着公司的需求来咯 现有一套微信的现成的源码，又不想重新写，费时又费力，这里推荐一个微信转支付宝的插件，贼好用

Antmove 小程序转换器（vscode插件）转过来就能用

好，说回正题，支付宝小程序的组件camera组件，不支持cover-view、cover-image 这两个组件的覆盖

<camera id="camera" frame-size='large' device-position="back" flash="{{isFlash ? 'on' : 'off'}}" 
      style='width: 100%; height: 100vh; position: relative; z-index: 0;' />
<image class='control-item-img' src='../images/album.png' onTap='antmoveAction' data-antmove-tap='onCameraReady'></image>

直接camera组件写上去的话，发现image并没有出来，反而被camera组件挤下去了

解决办法：给 image 添加position

.control-item-img {
	position: absolute;
  	top: 0;
  	left: 0;
  	width: 100vw;
}

然后真机就会发现，image图片就可以显示出来了

接下来就是重头戏，怎么给这个按钮添加点击事件并拍照 这里需要用到他的一个生命周期函数 onCameraReady

// 这个是直接写在 page 下面的
onCameraReady(e) {
   console.log('相机初始化完成');
   // 必须初始化完成之后才能拍照
    this.cameraContext = my.createCameraContext('camera');
    this.cameraContext.takePhoto({
     success(res) {
     	// 返回拍摄照片的本地临时路径
       console.log(res.tempImagePath);
      }
    })
  },

然后剩余的组件和API的属性，你们看文档吧

camera组件：官网地址 CameraContext.takePhoto：官网地址

有啥看不懂的，欢迎留言讨论！