使用 JavaScript 压缩 Base64 图片，保持纵横比例

日志

2024-01-06 20:00:33

理解 Base64 编码图片

Base64 是一种二进制编码方法，它可以将任意数据编码为 ASCII 字符串。这种编码方式通常用于在文本环境中传输二进制数据，如电子邮件或网页。图片可以使用 Base64 编码来传输或存储，这样可以使图片在传输过程中更加安全和稳定。

使用 JavaScript 压缩 Base64 图片

JavaScript 是一种广泛使用的脚本语言，它可以用于操作 HTML 和 CSS，也可以用于处理图片。我们可以使用 JavaScript 来压缩 Base64 图片，从而减少图片的大小，以便更快地传输和加载。

压缩 Base64 图片而不改变其纵横比例

在压缩 Base64 图片时，我们经常需要保持图片的纵横比例，以确保图片不会变形。我们可以通过以下步骤来实现这一点：

加载 Base64 图片。
创建一个新的画布元素。
在画布元素中绘制图片。
调整画布元素的大小，以适应图片的纵横比例。
将画布元素转换为 Base64 图片。
以下是一个示例代码，展示了如何在客户端对 Base64 图片进行压缩而不改变其纵横比例：

<!DOCTYPE html>
<html>
<head>
  <title>Base64 图片压缩并保持纵横比例</title>
</head>
<body>
  <textarea id="base64Image">/* 在这里粘贴你的 Base64 图片字符串 */</textarea>
  <button onclick="compressBase64Image()">压缩图片</button>
  
  <script>
    function compressBase64Image() {
      const base64Data = document.getElementById('base64Image').value;

      const img = new Image();
      img.onload = function() {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');

        // 设定压缩后的宽度和高度
        const maxWidth = 800;
        const maxHeight = 600;
        let width = img.width;
        let height = img.height;

        // 计算压缩后的宽高比例
        const ratio = Math.min(maxWidth / width, maxHeight / height);
        width *= ratio;
        height *= ratio;

        canvas.width = width;
        canvas.height = height;

        // 在画布中绘制图片，保持纵横比例
        ctx.drawImage(img, 0, 0, width, height);

        // 获取压缩后的图片数据（默认为 JPEG 格式，可以根据需要修改）
        const compressedBase64 = canvas.toDataURL('image/jpeg');

        console.log('压缩后的 Base64 图片数据:', compressedBase64);
        // 在这里可以将压缩后的 Base64 图片数据用于其他操作
      };

      img.src = base64Data;
    }
  </script>
</body>
</html>