uni-app uni.chooseImage 使用crop属性拍照裁剪返回页面会卡住或黑屏

类别	信息
产品分类	uniapp/App
PC开发环境	Windows
PC版本号	Windows10
HBuilderX类型	正式
HBuilderX版本	3.96
手机系统	iOS
手机版本号	iOS 15
手机厂商	苹果
手机机型	iPhone14Pro
页面类型	vue
vue版本	vue2
打包方式	云端
项目创建方式	HBuilderX

示例代码：

uni.chooseImage({
count: 1, //默认9
sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], //从相册选择
crop: {
width: plus.screen.resolutionWidth,
height: plus.screen.resolutionWidth,
},
})

操作步骤：

选择拍摄 -> 拍摄完成后点击使用照片 -> 裁剪页面点击左下角的“x” -> 回到拍摄页面，页面卡死，快速点击拍摄，页面会黑屏

预期结果：

点击x回到原页面或者拍摄页面，拍摄功能正常。

实际结果：

回到拍摄页面，页面卡住，且快速拍照会黑屏

bug描述：

使用uni.chooseImage方法的crop属性，在iOS手机上，拍完照片，到裁剪页面，点击左下角的“x”返回至拍摄页面，页面会卡住，快速点击拍照会黑屏。

h691938207 1楼•19 天前

在使用 uni.chooseImage 的 crop 属性进行拍照裁剪时，可能会遇到页面卡住或黑屏的问题。这通常是由于以下原因之一引起的：

1. 内存不足

原因：拍照和裁剪操作可能会占用较多的内存，尤其是在处理高分辨率图片时，如果设备内存不足，可能会导致页面卡住或黑屏。
解决方案：
- 确保设备有足够的内存。
- 降低图片的分辨率，可以通过 sizeType 参数设置为 ['compressed'] 来压缩图片。
- 在裁剪完成后，及时释放不必要的资源。

2. 异步操作未正确处理

原因：uni.chooseImage 是一个异步操作，如果在回调函数中未正确处理异步操作，可能会导致页面卡住或黑屏。
解决方案：
- 确保在回调函数中正确处理异步操作，避免阻塞主线程。
- 使用 Promise 或 async/await 来处理异步操作。

3. 页面生命周期问题

原因：如果在页面生命周期钩子（如 onLoad、onShow）中调用 uni.chooseImage，可能会导致页面卡住或黑屏。
解决方案：
- 避免在页面生命周期钩子中直接调用 uni.chooseImage，可以将其放在用户触发的操作中（如按钮点击事件）。

4. 兼容性问题

原因：某些设备或系统版本可能存在兼容性问题，导致 uni.chooseImage 的 crop 属性无法正常工作。
解决方案：
- 检查设备型号和系统版本，确保其支持 uni.chooseImage 的 crop 属性。
- 更新 uni-app 版本，确保使用的是最新版本。

5. 代码示例

以下是一个使用 uni.chooseImage 的 crop 属性的示例代码，确保正确处理异步操作和内存管理：

uni.chooseImage({
  count: 1, // 默认9
  sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
  sourceType: ['camera'], // 可以指定来源是相册还是相机，默认二者都有
  crop: {
    width: 300, // 裁剪宽度
    height: 300, // 裁剪高度
    resize: true // 是否允许调整裁剪框大小
  },
  success: async (res) => {
    const tempFilePaths = res.tempFilePaths;
    // 处理裁剪后的图片
    console.log('裁剪后的图片路径:', tempFilePaths[0]);
    // 可以在这里进行图片上传或其他操作
  },
  fail: (err) => {
    console.error('选择图片失败:', err);
  }
});