uni-app 图片压缩尺寸不影响质量

在处理图片压缩时，特别是在uni-app这种跨平台框架中，直接调整图片尺寸而不显著影响质量是一个挑战。虽然完全无损的压缩几乎不可能，但我们可以通过一些策略来尽量减少质量损失。以下是一个使用canvas API在uni-app中实现图片压缩的示例代码，该代码会调整图片尺寸，同时尽量保持较好的图像质量。

// 引入uni-app的canvas API
const canvas = uni.createCanvasContext('myCanvas');

// 假设我们有一张图片的路径
const imagePath = '/path/to/your/image.jpg';

// 目标宽度和高度，根据需求调整
const targetWidth = 800;
const targetHeight = 600;

// 创建一个Image对象
const img = uni.createImage();
img.src = imagePath;

img.onload = () => {
  // 获取原始图片的宽高
  const originalWidth = img.width;
  const originalHeight = img.height;

  // 计算缩放比例，保持图片的宽高比
  let scaleWidth = targetWidth / originalWidth;
  let scaleHeight = targetHeight / originalHeight;
  let scale = Math.min(scaleWidth, scaleHeight);

  // 计算压缩后的实际宽高
  const drawWidth = originalWidth * scale;
  const drawHeight = originalHeight * scale;

  // 绘制图片到canvas上
  canvas.drawImage(imagePath, 0, 0, drawWidth, drawHeight);

  // 将canvas内容导出为图片
  canvas.draw(false, () => {
    uni.canvasToTempFilePath({
      canvasId: 'myCanvas',
      destWidth: targetWidth, // 目标宽度，这里可以调整为任意值，但注意质量
      destHeight: targetHeight, // 目标高度
      quality: 1, // 质量，1为最高质量，但文件可能较大，根据需求调整
      success: (res) => {
        console.log('压缩后的图片路径:', res.tempFilePath);
        // 这里可以进一步处理压缩后的图片，比如上传到服务器
      },
      fail: (err) => {
        console.error('压缩图片失败:', err);
      }
    });
  });
};

// 在页面中需要有一个canvas元素
// <canvas canvas-id="myCanvas" style="width: 0; height: 0;"></canvas>

这段代码首先通过uni.createImage加载图片，获取其原始尺寸，并计算保持宽高比的缩放比例。然后，它使用canvas API将图片绘制到指定大小，并通过uni.canvasToTempFilePath导出为压缩后的图片。注意，destWidth和destHeight是导出图片时的目标尺寸，而quality参数控制导出图片的质量。在实际应用中，可能需要根据具体需求调整这些参数以达到最佳平衡。