uni-app iPhone X chooseImage剪裁图片黑屏

开发环境	版本号	项目创建方式
Mac	12.0.1	HBuilderX

示例代码：

uni.chooseImage({  
    count:1,  
    crop:{  
        width:500,  
        height:500,  
    },  
    success:(_res)=>{  
        this.headimg=_res.tempFilePaths[0]  
    }  
})

操作步骤：

uni.chooseImage({  
    count:1,  
    crop:{  
        width:500,  
        height:500,  
    },  
    success:(_res)=>{  
        this.headimg=_res.tempFilePaths[0]  
    }  
})

预期结果：

正常显示

实际结果：

黑屏

bug描述：

选择剪裁属性就会这样，其他机型都正常，不知道是不是专门这个手机的问题。头像那个图片可以剪裁，但是向日葵图片和自己拍的图片不行

zlyuanteng 1楼•9 天前

此设备在旧版是否正常？仅这个设备出现问题吗？其他设备是否正常？【bug优先处理规则】https://ask.dcloud.net.cn/article/38139

yibo5220 2楼•9 天前

确认下你拍摄照片的格式看是不是jpg png 还是heic
iOS15 对于icloud 图片会有个下载过程可能要稍微等下载完毕
向日葵和你拍的照片不选择crop时会不会有问题？

eggper 3楼•9 天前

你好 1.拍摄的格式，是iphoneX直接拍摄的，具体格式我不清楚，我上传的是jpge； 2.等了很久都是黑屏的； 3.不选择crop的时候，不会出现这个问题

bupafengyu 4楼•9 天前

回复 7***@qq.com: 这个图片的大小是多少？

htzhanglong 5楼•9 天前

回复 7***@qq.com: https://www.html5plus.org/doc/zh_cn/gallery.html#plus.gallery.pick 用5+方式看看是否出现这个问题我这手机都没法复现这个问题

htzhanglong 6楼•9 天前

在 uni-app 中使用 uni.chooseImage 方法选择图片并在 iPhone X 上进行剪裁时出现黑屏问题，可能是由于以下原因导致的：

1. 图片尺寸过大

iPhone X 的屏幕分辨率和设备性能较高，如果选择的图片尺寸过大，可能会导致剪裁时出现黑屏或卡顿。
解决方法：在 uni.chooseImage 中设置 sizeType 为 ['compressed']，以选择压缩后的图片。

uni.chooseImage({
    count: 1,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: function (res) {
        const tempFilePaths = res.tempFilePaths;
        // 处理图片
    }
});

2. 剪裁组件兼容性问题

如果你使用了第三方剪裁组件，可能存在兼容性问题，尤其是在 iPhone X 等设备上。
解决方法：确保使用的剪裁组件是最新版本，或者尝试使用其他剪裁组件。

3. 图片格式问题

某些图片格式可能在剪裁时出现问题，尤其是 HEIC 格式（iPhone 默认的图片格式）。
解决方法：在 uni.chooseImage 中设置 sizeType 为 ['compressed']，或者将图片转换为其他格式（如 JPEG）后再进行剪裁。

4. 内存不足

如果设备内存不足，可能会导致剪裁过程中出现黑屏。
解决方法：关闭其他占用内存较大的应用，或者优化代码以减少内存占用。

5. uni-app 版本问题

如果你使用的 uni-app 版本较旧，可能存在一些已知的 bug。
解决方法：升级到最新版本的 uni-app，并检查是否有相关的 bug 修复。

6. 剪裁参数设置问题

如果你在剪裁时设置了不合理的参数（如剪裁区域过大或过小），可能会导致黑屏。
解决方法：检查剪裁参数，确保其合理。

7. 使用原生剪裁功能

如果以上方法都无法解决问题，可以尝试使用原生剪裁功能，或者调用原生 API 进行剪裁。

示例代码

以下是一个使用 uni.chooseImage 并剪裁图片的示例代码：

uni.chooseImage({
    count: 1,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: function (res) {
        const tempFilePaths = res.tempFilePaths;
        uni.getImageInfo({
            src: tempFilePaths[0],
            success: function (imageInfo) {
                // 在这里进行剪裁操作
                uni.canvasToTempFilePath({
                    x: 0,
                    y: 0,
                    width: imageInfo.width,
                    height: imageInfo.height,
                    destWidth: 300, // 剪裁后的宽度
                    destHeight: 300, // 剪裁后的高度
                    canvasId: 'myCanvas',
                    success: function (res) {
                        const croppedImagePath = res.tempFilePath;
                        // 处理剪裁后的图片
                    },
                    fail: function (err) {
                        console.error('剪裁失败', err);
                    }
                });
            },
            fail: function (err) {
                console.error('获取图片信息失败', err);
            }
        });
    },
    fail: function (err) {
        console.error('选择图片失败', err);
    }
});