uni-app camera、takePhoto拍照功能返回的照片被截取

uni-app camera、takePhoto拍照功能返回的照片被截取

项目属性 值
产品分类 uniapp/小程序/阿里
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 19045.4291
HBuilderX类型 正式
HBuilderX版本号 4.08
第三方开发者工具版本号 3.8.21
基础库版本号 2.9.6
项目创建方式 HBuilderX

示例代码：

<camera id="camera" flash="off" device-position="front" @ready="onCameraReady" @error="onCameraError"  
  @stop="onCameraStop" :style='{width: `${windowWidth}px`,height: `${windowHeight}px`}'></camera>  

<view class='camerabgImage'>  
  <view class="takePhoto" @click="takePhoto">拍照</view>  
</view>

takePhoto() {  
  this.cameraContext.takePhoto({  
    quality: 'low',  
    success(res) {  
    console.log(res)  
    }  
  })  
)

操作步骤：

  • 点击拍照返回图片信息

预期结果：

  • 全屏拍照返回全屏图片

实际结果：

  • 全屏拍照照片被截取

bug描述：

uniapp编译支付宝小程序使用camera、takePhoto拍照，返回照片被截取；而支付宝原生写法返回正常。


更多关于uni-app camera、takePhoto拍照功能返回的照片被截取的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

刚又测试了一下 图片没有截取了 但是旋转了90°

更多关于uni-app camera、takePhoto拍照功能返回的照片被截取的实战教程也可以访问 https://www.itying.com/category-93-b0.html


已解决

您好，截取问题怎么解决的呢

遇到相同的问题，并且takePhoto时画面会有闪动

在使用 uni-app 的 camera 组件进行拍照时，可能会遇到照片被截取或显示不完全的问题。这通常是由于 camera 组件的宽高比例与实际照片的宽高比例不一致导致的。

以下是一些可能的原因和解决方案：

1. 检查 camera 组件的宽高比例

  • camera 组件的宽高比例应与实际拍摄的照片比例一致。如果不一致，可能会导致照片被截取或显示不完全。
  • 可以尝试设置 camera 组件的宽高为固定值，或者使用 aspectRatio 属性来指定比例。
<camera style="width: 100%; height: 100%;" aspectRatio="16:9"></camera>

2. 使用 takePhoto 方法获取照片

  • 使用 takePhoto 方法拍摄照片时，返回的照片是完整尺寸的，但可能会受到 camera 组件的显示区域影响。
  • 确保 camera 组件的宽高比例与实际照片比例一致，以避免照片被截取。
const camera = uni.createCameraContext(this);
camera.takePhoto({
  quality: 'high',
  success: (res) => {
    console.log('拍照成功', res.tempImagePath);
  },
  fail: (err) => {
    console.error('拍照失败', err);
  }
});

3. 处理照片的宽高比例

  • 如果照片的宽高比例与 camera 组件的显示区域不一致，可以在拍摄后对照片进行处理，例如裁剪或缩放，以确保显示完整。
uni.getImageInfo({
  src: photoPath,
  success: (res) => {
    console.log('图片信息', res.width, res.height);
    // 根据需要处理图片
  }
});

4. 调整 camera 组件的显示区域

  • 如果 camera 组件的显示区域与照片比例不一致，可以调整 camera 组件的宽高，或者使用 CSS 样式来控制显示区域。
camera {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持比例，覆盖整个区域 */
}

5. 检查设备屏幕比例

  • 不同设备的屏幕比例可能不同，导致 camera 组件的显示区域与照片比例不一致。可以在不同设备上测试，并根据设备屏幕比例调整 camera 组件的宽高。

6. 使用 uni.getSystemInfo 获取设备信息

  • 使用 uni.getSystemInfo 获取设备的屏幕宽高，动态调整 camera 组件的宽高比例。
uni.getSystemInfo({
  success: (res) => {
    const screenWidth = res.screenWidth;
    const screenHeight = res.screenHeight;
    const aspectRatio = screenWidth / screenHeight;
    // 根据屏幕比例设置 camera 组件的宽高
  }
});
回到顶部