⼩程序⾃定义相机拍照，计算⼤⼩，以及上传
需求：近来⼩程序有个需求，⾃定义相机拍照，并且要在相机中画⼀个框，提⽰⽤户把拍摄内容放⼊框中，类似于上传⾝份证时那个头像，国徽对其的框。（因为我们上传的是⼀份A4纸的病例），所以需要这样。然后后台解析上传的病例图⽚，返回给我病例数据，我把数据填充到表单中。
调研1: ⾸先想到的是调⽤的 wx.chooseImage  ，由⽤户选择是 解析本地的图⽚，还是拍照，但是发现⼀个问题，如下：
1）⽆法⾃定义相机，导致⽤户没办法参考拍摄成什么样照⽚为合格，⽬前没到办法。
调研2: 后来发现⼩程序组件提供了 camera 相机组件，经过测试，可以⾃定义相机。（调⽤相机时会有权限提⽰）实现⽅法为，写⼀个辅助框，定位到相机上⾯，就实现了。（其余⾝份证框，头像框实现原理可能也⼀样，或者⽤canvas 画，个⼈理解）
调研3: 后台说拍摄的图⽚⼤⼩不能超过4M，所以我需要验证⼀下图⽚的⼤⼩，但是 camera 拍照成功之后拿不到 照⽚的源⽂件，只有返回 tempImagePath  （照⽚的临时路径，本地路径），现在计算根据临时路径来解析图⽚⼤⼩，
发现 官⽅有提供api ，wx.getFileInfo ，可以解析。但是经过测试，解析出来的图⽚⼤⼩，只有 0.XXXX
M ，不知道为什么，可能官⽅压缩了。 （后来此⽅法注释掉了）
调研4: 刚开始我以为上传是把拍摄好的图⽚源⽂件 传给后台，后来发现传的是⼀个本地路径，成功之后由后台⽤路径解析出图⽚，在解析图⽚，然后把数据返回给我。
现在完整的流程通了，以下为代码
<!--pages/photograph/photograph.wxml-->
<!-- <text>pages/photograph/photograph.wxml</text> -->
笔记本无线网络连接不上<view class="photo">
<camera device-position="back" flash="off" binderror="cameraError" class="camera">
<view class="photo-border"></view>
</camera>
<!-- <view>{{size}}</view> -->
<!-- <image mode="widthFix" src="{{src}}"></image> -->
<van-button color="#37b9c6" block type="primary" bind:click="takePhoto">确定</van-button>
</view>
/* pages/photograph/photograph.wxss */ .photo{
/* height: 100%; */
/* width: 100%; */
position: relative;
}
.camera{
height: calc(100vh - 130rpx);
width: 100%;
position: relative;
margin-bottom: 20rpx;
窅娘}
.photo-border{
position: absolute;
left:15rpx;
top:25rpx;
width: calc(100% - 30rpx);
height: calc(100vh - 180rpx);
border: 1px solid #37b9c6;
}
// pages/photograph/photograph.js
Page({
/**
* 页⾯的初始数据
*/
data: {
src:'',
size:0,
},
takePhoto() {
const ctx = wx.createCameraContext()    ctx.takePhoto({
quality: 'high',
success: (res) => {
console.log(res);
// wx.getFileInfo({
//  pImagePath,
//  success: (res)=> {
//    let size=res.size/1024/1024;
//    this.setData({
//      size: size
//    })
//    console.log(res.size)
//    console.log(res.digest)
/
/  }
// })
wx.uploadFile({
url: 'url',  //此处为后台服务器上传路径          filePath: pImagePath,
name: 'name',
success: (res)=>{ //⼀下为⾃⼰的逻辑            app.globalData.photoData=res.data;            //do something
wx.navigateBack({
delta: 1 //返回上⼀级页⾯
})
},
fail:()=>{
wx.showToast({
title: '上传失败',
赵丽颖冯绍峰婚礼icon: 'none'
黄景瑜个人资料简介及
})
}
})
}
})
},
cameraError(e) {
console.log(e.detail)
wx.showToast({
title: '以拒绝，使⽤请⼿动开启',
icon:'none'
})
地震的级别
setTimeout(()=>{
wx.navigateBack({
delta: 1 //返回上⼀级页⾯
})
},3000)
怎么付款到支付宝}
})