js压缩图片并上传，不失真，保证图片清晰度

实现这个需求，可以借助一些第三方库，比如 `compressjs` 和 `canvas`。

首先，在前端页面中，我们需要通过 `input` 标签让用户选择需要上传的图片。选择完毕后，我们可以通过 `FileReader` 对象将图片文件读取为二进制数据。

接着，我们可以使用 `compressjs` 库中的 `LZString.compressToBase64` 方法对图片二进制数据进行压缩，并将压缩后的结果上传到后端服务器。

在后端服务器中，我们可以使用 `canvas` 对象来进行解压和解码。具体流程如下：

1. 读取压缩后的图片数据，并将其解码为原始的二进制数据。

2. 将原始的二进制数据转换为 `Blob` 对象，并使用 `URL.createObjectURL` 方法生成一个临时的 URL。

3. 使用 `canvas` 对象将临时 URL 中的图片绘制到画布上。

4. 将画布上的图片转换为 `Blob` 对象，并将其上传到服务器。

需要注意的是，在进行图片压缩和解压过程中，需要尽可能地保持图片的清晰度，避免出现失真的情况。同时，为了提高上传速度，可以根据具体情况对图片的大小进行限制。