uni-app uni.chooseImage()裁剪功能在IOS端存在图片拉伸的BUG

发布于 1周前 作者 nodeper 来自 Uni-App

uni-app uni.chooseImage()裁剪功能在IOS端存在图片拉伸的BUG

示例代码：

uni.chooseImage({  
    pageOrientation: "portrait",  
    count: 1,  
    sourceType: ["album"],  
    crop: {  
        width: 750,  
        height: 600,  
        resize: false  
    },  
    success: (res) => {  
        console.log(res);  
    },  
    fail: (err) => {  
        console.log("err: ", JSON.stringify(err));  
    }  
})

操作步骤：

uni.chooseImage({  
    pageOrientation: "portrait",  
    count: 1,  
    sourceType: ["album"],  
    crop: {  
        width: 750,  
        height: 600,  
        resize: false  
    },  
    success: (res) => {  
        console.log(res);  
    },  
    fail: (err) => {  
        console.log("err: ", JSON.stringify(err));  
    }  
})

预期结果：

  • 图片可以正常根据设定的尺寸进行裁剪

实际结果：

  • 图片被拉伸和压缩到裁剪范围内，导致无法正常选择裁剪范围

bug描述：

uni.chooseImage()在进行图片裁剪的时候，图片被拉伸压缩，无法正常选择裁剪范围


Harmonyos Next教程
2 回复

4.41版本这个bug依然存在


在uni-app中使用uni.chooseImage()进行图片选择时，确实可能会遇到在iOS设备上图片被拉伸的BUG。这通常是由于图片在不同设备或不同分辨率下，其宽高比没有正确处理导致的。虽然uni-app本身没有直接提供裁剪功能，但我们可以通过一些方法绕过这个问题，或者确保在显示图片时保持其原始宽高比。

以下是一个示例，展示如何在选择图片后，确保图片在iOS设备上显示时不被拉伸。这里我们将使用Canvas来处理图片，并确保其在显示时保持原始宽高比：

// 选择图片
uni.chooseImage({
    count: 1, // 最多可以选择的图片张数
    success: function (res) {
        const tempFilePaths = res.tempFilePaths;
        const filePath = tempFilePaths[0];

        // 使用uni.getImageInfo获取图片信息
        uni.getImageInfo({
            src: filePath,
            success: function (imageInfo) {
                const originalWidth = imageInfo.width;
                const originalHeight = imageInfo.height;
                
                // 设置canvas的宽高为图片的宽高（或根据需要调整）
                const canvasWidth = 300; // 示例宽度
                const canvasHeight = (canvasWidth / originalWidth) * originalHeight; // 保持宽高比计算高度

                const ctx = uni.createCanvasContext('myCanvas');
                ctx.drawImage(filePath, 0, 0, canvasWidth, canvasHeight);
                ctx.draw(false, function () {
                    // 将canvas转换为图片并显示
                    uni.canvasToTempFilePath({
                        canvasId: 'myCanvas',
                        success: function (res) {
                            const newImagePath = res.tempFilePath;
                            // 这里可以将newImagePath用于显示或上传
                            console.log('Processed Image Path:', newImagePath);
                        },
                        fail: function (err) {
                            console.error('Canvas to Temp File Path Failed:', err);
                        }
                    });
                });
            },
            fail: function (err) {
                console.error('Get Image Info Failed:', err);
            }
        });
    },
    fail: function (err) {
        console.error('Choose Image Failed:', err);
    }
});

在上面的代码中，我们首先使用uni.chooseImage()选择图片，然后使用uni.getImageInfo()获取图片信息。根据图片的原始宽高，我们计算出canvas的显示宽高，以保持图片的宽高比。之后，我们使用uni.createCanvasContext()创建canvas上下文，并使用ctx.drawImage()将图片绘制到canvas上。最后，通过uni.canvasToTempFilePath()将canvas内容转换为图片文件路径，以便后续使用。

这种方法可以确保图片在iOS设备上显示时不会被拉伸，同时保持了图片的原始宽高比。如果需要进一步的裁剪功能，可以考虑引入第三方裁剪库或自行实现裁剪逻辑。

回到顶部