JavaScript 压缩图像

从互联网早期发展至今，图片一直是现代网站和在线应用程序中流行且至关重要的组成部分。图片具有多种功能，包括提供与文本内容相辅相成的想法和细节，从而增强理解。

除了增强用户体验，图片还可以通过为不同的网站主题提供额外的背景或澄清来体现品牌身份。它们对于网站的搜索引擎优化 (SEO) 也至关重要，这可以增加用户参与度，吸引更多访问量，并最终提高转化率。

在现代在线应用程序中，图片的上传和下载频率可能非常高。然而，客户端和服务器之间的数据传输很快就会变得资源密集。我们还需要考虑到移动设备占互联网流量的大部分，因此我们应该预料到人们会上传手机拍摄的图片。由于新款移动设备的相机分辨率越来越高，这些文件可能会非常大（> 10MB）。

当用户在您的平台上分享照片时，其他用户在上传到您的存储服务器后，会出于各种用途下载这些照片。相比之下，这项任务比向数据库添加新条目需要更多的资源。我们应该预料到需要支付更多费用

1. 上传带宽。
2. 下载带宽。对于发布的每张图片，通常会在用例中发生多次下载。
3. 存储：数据和照片通常存储在磁盘或对象存储服务中。重要的是要记住，除非您建立删除策略，否则一旦将照片保存到您的存储中，您就必须在程序运行期间一直保存它。因此，存储价格永远不会像按时消耗计算的带宽费用那样随时间下降。

如何优化图片分享？

图片压缩是显而易见的解决方案。但是，如果您的软件主要关注图片质量，那么这种方法可能不适合您。服务器端压缩是一种流行的做法，可以减少所需的存储空间和下载带宽。虽然这种方法可能比下载带宽便宜，但它会消耗更多的 CPU 周期，这是一笔额外的开销。

通过在上传前在客户端压缩图片，我们可以进一步减少不必要的上传流量，这得益于现代浏览器 API。由于压缩所需的时间远少于通过网络进行的大文件上传请求，因此减少带宽也可以加快上传速度。

通过直接在浏览器中压缩图片，HTML5 功能（如 Canvas、FileReader 和 Blob）可以减少平台需要上传、保存和下载的字节数。

MDN 背景简述

借助 Canvas API，可以使用 JavaScript 和 HTML 的 `` 元素绘制图形。它可以应用于各种任务，例如实时视频处理、数据可视化、游戏图形、动画和照片修改。Canvas API 主要侧重于 2D 图形。WebGL API 通过使用 `` 元素来创建硬件加速的 2D 和 3D 图形。

Web 应用程序可以使用 FileReader 对象异步读取用户计算机上保存的文件（或原始数据缓冲区）。File 或 Blob 对象用于指定要读取的文件或数据。可以通过 HTMLCanvasElement 上的 mozGetAsFile() API、用户使用 `` 元素选择文件后返回的 FileList 对象，或拖放操作的 DataTransfer 对象来检索 File 对象。

Blob 是一个不可变的、类似于文件的原始数据对象。它可以被读取为文本或二进制数据，也可以转换为 ReadableStream 以便对其数据处理应用其方法。Blobs 可以用来表示非 JavaScript 原生格式的数据。基于 Blob，File 接口扩展了 Blob 处理用户系统上文件的方法。

为什么需要图片优化？

图片优化是一种在尽可能减小文件大小的同时，以正确的格式、尺寸和分辨率交付高质量图片的技巧。图片优化对于向用户展示高质量图片但又不损害页面加载时间等性能指标的网站尤其有利。

代码

CSS 代码

JavaScript 代码

输出

首先，我们需要点击“请上传您的图片”

然后，我们按需上传图片并点击“打开”。

然后会出现以下屏幕，我们可以根据需要调整图片大小，例如更改图片的宽度、高度和质量。之后，我们可以下载我们的图片。

当我们右键单击图片时，会弹出以下菜单，我们可以单击“另存为”选项来保存我们的图片。