微信小程序自定义相机拍照，计算大小，以及上传

需求：近来微信小程序有个需求，自定义相机拍照，并且要在相机中画一个框，提示用户把拍摄内容放入框中，类似于上传身份证时那个头像，国徽对其的框。（因为我们上传的是一份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({//   filePath:res.tempImagePath,//   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: res.tempImagePath,name: 'name', success: (res)=>{ //一下为自己的逻辑app.globalData.photoData=res.data;//do somethingwx.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)}
})

微信小程序自定义相机拍照，计算大小，以及上传相关推荐

uni开发微信小程序自定义相机自动检测(人像+身份证)
之前开发过微信小程序自定义相机拍照检测人像和身份证检测.一直期望写篇文章记录一下,趁现在有点时间,总结一下. 需求点: 1.能够自定拍摄人像 2.能够自动拍摄身份证正面照 3.识别身份证并且和人脸照比 ...
uniapp微信小程序自定义相机，给相机添加辅助框，解决拒绝相机默认授权后无法再次拉起相机授权问题
微信小程序自定义相机效果文章目录微信小程序自定义相机效果需求一.小程序自定义相机 1.使用uniapp的camera组件二.使用cover-view,cover-image加辅助边框三 ...
微信小程序之使用vant-3组件Uploader文件上传
效果图: 微信小程序之使用vant-3组件Uploader文件上传 1.把vant的weapp包加进来 2.在app.json文件里面"usingComponents"加载进来才能 ...
微信小程序—自定义相机
小程序自定义相机?其实有些名不副实,因为小程序给提供的接口简单到不能再简单,不给你丝毫修改的机会,能做的不过是在相机上覆盖cover-view.cover-image.canvas之类的,来提升相机的 ...
【避坑指“难”】微信小程序自定义相机：自定义取景框、本地保存照片可分享、获取GPS定位
CustomCamera 功能介绍与展示小程序取景框内拍照实时显示当前时间显示当前经纬度显示当前街道信息可本地保存照片代码实现 1.拍照功能拍摄照片:CameraContext.ta ...
在微信开发者工具中实现微信小程序之相机拍照及其相关功能的开发
微信小程序 - 相关知识技术扩展 - 微信小程序 - 相机拍照功能微信开发:前端 + 后端小程序开发 - 准备工作:JavaScript + HTML + CSS 小程序 - 面向微信框架技术开 ...
《微信小程序案例6》点击图片上传，从本地相册选择或打开摄像头拍摄上传照片
点击一下相机图片实现上传本都相册图片或者打开摄像头拍照上传使用微信小程序API里面的wx.chooseImage 实现点击并上传图片后把上传的图片放入上面的虚线框里面. 方法: 在wx.choose ...
C# 做微信小程序后台，基本服务器配置以及图片上传
最近参加腾讯的高校微信小程序大赛,用C#做过几个网站,便用C#做后台写接口,在操作的过程中遇到了很多问题.由于C#的生态(C#是最好的语言,不接受反驳),网上资料很少,一边摸索着一边写,还是很艰难的, ...
微信小程序多张图片和表单一起上传，验证表单及进度条的实现完整代码
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 效果图: 完整代码:  ...

微信小程序自定义相机拍照，计算大小，以及上传

微信小程序自定义相机拍照，计算大小，以及上传相关推荐

最新文章

热门文章