示例图：
1：在小程序可见页面减少一个图片展现区域，并给定一个点击事件能够唤起拍照
2：容许小程序应用相机权限后进入拍照页面（页面减少了一个头像搁置区域，返回按钮，拍摄按钮，摄像头转换按钮）
3：点击拍照按钮拍照
4：拍照后进入照片预览页面（页面提供返回重拍和裁剪后预览确认性能，如图红框区域为截图区域，可依照需要自行区域裁剪）
5：裁剪后进入图片预览，并将图片转换成base64格局，与后端接口进行对接
文件代码
centre：示例图1
carame：示例图2,3,4
preview：示例图5
we-cropper:提供示例图4的缩放和剪裁性能（动态资源文件，下载后间接放到pages文件夹下，在carema.js中引入即可，官网下载可点击）
代码摘要
示例图1：按钮触发后，进入carema页面
示例图2：
<view class="caream-wrap"> <camera device-position="{{cameraPos}}" class="carema-area" wx:if="{{showCamera}}"> <camera-view class="carema-anchor"> <image mode="widthFix" class="carema-anchor-img" src="/images/anchor.png"></image> </camera-view> </camera> <view class="CameraOptions" wx:if="{{showCamera}}"> <view class="takePicBtn"> <!-- 摄像头的返回按钮 --> <view class="takephotoicon"> <image mode="widthFix" class="confirm" src="/images/caremaback.png" bindtap="goBack"></image> </view> <!-- 照相的按钮 --> <view bindtap="getPhoto" class="takephotoicon"> <view class="outter-shoot"> <view class="inner-shoot"></view> </view> </view> <!-- 摄像头的前后转换按钮 --> <view class="takephotoicon"> <image mode="widthFix" class="switch" src="/images/switch.png" bindtap='changePos'></image> </view> </view> </view><!--剪裁区域--> <import src="../we-cropper/we-cropper.wxml" /> <view class="cropper-wrapper" wx:if="{{!showCamera}}"> <template is="we-cropper" data="{{...cropperOpt}}" /> </view> <view class="cropper-buttons" wx:if="{{!showCamera}}"> <view class="cancel" bindtap="handleCloseCropper">重拍</view> <view class="getCropperImage" bindtap="getCropperImage">确定并预览</view> </view></view>js
import WeCropper from '../we-cropper/we-cropper.js'const device = wx.getSystemInfoSync(); // 获取设施信息const width = device.windowWidth; // 获取设施宽，不便设置画布和裁剪框宽度const height = device.windowHeight; // 获取设施高，不便设置画布和裁剪框高度Page({ data: { cropperOpt: { id: 'cropper', // 用于手势操作的canvas组件标识符 targetId: 'targetCropper', // 用于用于生成截图的canvas组件标识符 pixelRatio: device.pixelRatio, // 传入设施像素比 width, // 画布宽度 height: 413, // 画布高度 scale: 2.5, // 最大缩放倍数 zoom: 8, // 缩放系数 src: "", cut: { x: (width - 295) / 2, // 裁剪框x轴终点 y: 0, // 裁剪框y轴期终点 width: 295, // 裁剪框宽度 height: 413 // 裁剪框高度 } }, imageUrl: "", cameraPos: 'front', showCamera: true, wecropper: '' }, // 照相 getPhoto() { // c创立相机上下文对象,获取惟一的相机对象 var context = wx.createCameraContext() // 照相性能 context.takePhoto({ quality: "low", success: res => { // 照相胜利的回调 console.log(res); // 图片的信息 this.setData({ // 暗藏相机 showCamera: false, imageUrl: res.tempImagePath, src: res.tempImagePath, }) // 实例化WeCropper this.createCropper(); }, fail: () => { wx.showToast({ title: '呈现谬误', }) } }) }, createCropper() { const that = this let { cropperOpt } = that.data cropperOpt.src = that.data.imageUrl; let wecropper = new WeCropper(cropperOpt).on('ready', (ctx) => {}).on('beforeImageLoad', (ctx) => { }).on('imageLoad', (ctx) => {}) this.setData({ wecropper, }) }, // 相机前后镜头转换 changePos() { this.setData({ cameraPos: this.data.cameraPos == "back" ? "front" : "back" }) }, // 敞开相机,回退到个集体核心 goBack() { wx.switchTab({ url: '../centre/centre', }) }, //点击勾销裁剪 handleCloseCropper() { console.log(11111) this.setData({ showCamera: true }); }, touchStart(e) { this.wecropper.touchStart(e) }, touchMove(e) { this.wecropper.touchMove(e) }, touchEnd(e) { this.wecropper.touchEnd(e) }, getCropperImage() { wx.setStorageSync('caremapreview', null); this.data.wecropper.getCropperImage((tempFilePath) => { console.log(tempFilePath) // tempFilePath 为裁剪后的图片长期门路 if (tempFilePath) { this.setData({ // 暗藏相机 imageUrl: tempFilePath }) wx.getImageInfo({ src: tempFilePath, success(imageInfo) { let imgType = imageInfo.type wx.getFileSystemManager().readFile({ filePath: tempFilePath, encoding: "base64", success: res => { //返回base64格局 let base64Str = 'data:image/' + imgType + ';base64,' + res.data wx.setStorageSync('caremapreview', { imgurl: base64Str, }); wx.navigateTo({ url: '../preview/preview', }) }, fail: err => { console.log(err) } }) } }) } else { wx.showModal({ title: '获取图片地址失败，请稍后重试', icon: 'success' }) } }) },})外围办法阐明
getCropperImage()实现了剪裁图片长期地址的额获取，并且在取得地址后应用微信自带的wx.getFileSystemManager().readFile()办法实现了将temp地址转换成base64格局。base64暂存入StorageSync，便于preview页面获取base64地址并展现
如有问题，请斧正，心愿能帮到大家