uni-app chooseImage 选择“预览”-“编辑”后模糊

在使用 uni-app 的 chooseImage API 选择图片并进行“预览”和“编辑”后，图片可能会变得模糊。这通常是由于以下几个原因导致的：

1. 图片压缩

• 在 chooseImage 的 success 回调中，返回的图片路径可能是经过压缩的版本。默认情况下，uni-app 可能会对图片进行压缩以减少文件大小，这会导致图片质量下降。
• 解决方案：在 chooseImage 时，可以通过设置 compressed 参数为 false 来避免图片压缩。

uni.chooseImage({
    count: 1,
    sizeType: ['original'], // 选择原图
    sourceType: ['album', 'camera'],
    success: (res) => {
        console.log(res.tempFilePaths); // 图片的本地文件路径列表
    }
});

2. 图片裁剪或编辑时的分辨率

• 如果图片在编辑或裁剪时被缩小了分辨率，那么最终生成的图片可能会变得模糊。
• 解决方案：在编辑图片时，确保选择的分辨率足够高，或者使用原图进行编辑。

3. 图片显示时的缩放

• 如果图片在显示时被缩放了（例如，图片本身很大，但在页面上显示的尺寸较小），可能会导致图片看起来模糊。
• 解决方案：确保图片在显示时的尺寸与图片本身的分辨率匹配，或者使用 CSS 的 image-rendering 属性来优化图片显示。

img {
    image-rendering: -webkit-optimize-contrast; /* 优化图片显示 */
}

4. 图片格式

• 如果图片保存为低质量的格式（如 JPEG 压缩率过高），可能会导致图片模糊。
• 解决方案：在保存或上传图片时，选择高质量的图片格式（如 PNG 或高压缩率的 JPEG）。

5. 系统或设备限制

• 某些设备或系统可能会对图片进行处理或压缩，导致图片质量下降。
• 解决方案：测试不同设备和系统，确保图片质量符合预期。

示例代码

以下是一个完整的示例代码，避免图片压缩并确保图片质量：

uni.chooseImage({
    count: 1,
    sizeType: ['original'], // 选择原图
    sourceType: ['album', 'camera'],
    success: (res) => {
        // 获取图片路径
        const tempFilePath = res.tempFilePaths[0];
        console.log(tempFilePath);

        // 显示图片
        uni.previewImage({
            urls: [tempFilePath],
            success: () => {
                console.log('图片预览成功');
            },
            fail: (err) => {
                console.log('图片预览失败', err);
            }
        });
    },
    fail: (err) => {
        console.log('选择图片失败', err);
    }
});