uni-app uni.chooseImage 开启 crop 功能后 选择图片出现黑屏问题
uni-app uni.chooseImage 开启 crop 功能后 选择图片出现黑屏问题
示例代码：
uni.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
crop: {
width: 750,
height: 750,
},
success(res) {
}
})操作步骤：
- 选择图片
预期结果：
- 正常显示图片并且裁剪
实际结果：
- 黑屏
bug描述：
如标题所示：使用 uni.chooseImage 上传图片拼开启 crop， 选择图片后黑屏。 这里有一个小规律，就是选择近期的图片，可以成功，选择稍后的图片大概倒数 12张左右的样子就打不开，选择之后黑屏。 还有就是 近期能选择的图片，打开后裁剪框拼不是居中的。会跑偏到左边，然后点一下 底部的刷新按钮会居中。
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| Mac | 12.4 | HBuilderX |
14 回复
我也刚刚遇到这个问题了，安卓端正常，IOS相册里面前273张图片也正常，IOS从相册第274张图片开始就黑屏了。如果用户想选早期的图片就选择不到了。很难受还不知道怎么解决。
哦哦哦 我知道我的问题出在哪里了 原来手机相册从274张开始 275 276.。。。。等等的图片在IOS的iCloud的云端呢。从相册把图片点开一次，IOS系统就从云端下载下来了，然后在uniapp这边上传就正常了
在使用 uni.chooseImage 并开启 crop 功能时，出现黑屏问题可能是由于以下原因之一导致的。以下是一些可能的解决方案：
1. 图片格式问题
- 确保选择的图片格式是支持的格式（如 JPG、PNG 等）。
- 如果图片格式不支持，可能会导致裁剪时出现黑屏。
2. 图片尺寸过大
- 如果图片尺寸过大，可能会导致裁剪时出现黑屏。可以尝试压缩图片后再进行裁剪。
- 可以使用
uni.compressImage对图片进行压缩后再进行裁剪。
3. 裁剪参数设置问题
- 检查
crop参数是否正确设置。例如，crop.width和crop.height是否合理。 - 如果裁剪的尺寸过大或过小，可能会导致黑屏。
uni.chooseImage({
count: 1,
sourceType: ['album', 'camera'],
crop: {
width: 300, // 裁剪宽度
height: 300, // 裁剪高度
quality: 1 // 图片质量
},
success: (res) => {
console.log(res.tempFilePaths);
},
fail: (err) => {
console.error(err);
}
});4. 系统兼容性问题
- 某些 Android 或 iOS 设备可能存在兼容性问题，导致裁剪时出现黑屏。
- 可以尝试在不同的设备上测试，或者更新
uni-app版本。
5. 权限问题
- 确保应用有访问相册和相机的权限。如果权限不足，可能会导致裁剪时出现黑屏。
- 可以在
manifest.json中配置相关权限。
6. 使用第三方裁剪插件
- 如果
uni.chooseImage的crop功能无法满足需求，可以考虑使用第三方裁剪插件，如uView或we-cropper。
7. 调试与日志
- 在
fail回调中打印错误信息，查看是否有具体的错误提示。 - 使用
console.log打印相关参数，检查是否有异常。
8. 更新 uni-app 版本
- 如果使用的是较旧版本的
uni-app，可能存在已知的 bug。尝试更新到最新版本，看看问题是否解决。
9. 使用原生插件
- 如果问题依然存在，可以考虑使用原生插件进行图片选择和裁剪，如
cordova-plugin-crop或react-native-image-crop-picker。
示例代码
以下是一个完整的示例代码，供参考：
uni.chooseImage({
count: 1,
sourceType: ['album', 'camera'],
crop: {
width: 300, // 裁剪宽度
height: 300, // 裁剪高度
quality: 1 // 图片质量
},
success: (res) => {
console.log('裁剪后的图片路径:', res.tempFilePaths);
},
fail: (err) => {
console.error('选择图片失败:', err);
}
});