怎样让微信小程序camera拍照界面显示在屏幕中间,默认显示靠左
<camera device-position="back" style="width: 100%; height: 100vh;"></camera>
用一个
加css样式定到中间去
<view style="margin: 100%;height: 300rpx;position: absolute;top: 50%;left:0; right:0; top:0; bottom:0;margin:auto;">
<camera device-position="back" flash="off" binderror="error" style="width: 100%; height: 300rpx;"></camera>
</view>
微信的官方demo没出现你说的情况
<!-- camera.wxml -->
<camera device-position="back" flash="off" binderror="error" style="width: 100%; height: 300px;"></camera>
<button type="primary" bindtap="takePhoto">拍照</button>
<view>预览</view>
<image mode="widthFix" src="{{src}}" style="width: 100%;"></image>
// camera.js
Page({
takePhoto() {
const ctx = wx.createCameraContext()
ctx.takePhoto({
quality: 'high',
success: (res) => {
this.setData({
src: res.tempImagePath
})
}
})
},
error(e) {
console.log(e.detail)
}
})
使用css层叠样式表 进行样式的修饰
用一个大盒子 装着camera拍照界面 然后 使用垂直居中的样式进行排列
缩放 scaleToFill 不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素
缩放 aspectFit 保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。
缩放 aspectFill 保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。
缩放 widthFix 宽度不变,高度自动变化,保持原图宽高比不变
直接把width设为100%即可,如果宽不铺满100%默认就是靠左的
<!-- camera.wxml -->
<camera device-position="back" flash="off" binderror="error" style="width: 100%; height: 300px;"></camera>
<button type="primary" bindtap="takePhoto">拍照</button>
<view>预览</view>
<image mode="widthFix" src="{{src}}" style="width: 100%;"></image>
用view把他包起来,view样式写text-align:center试试