JavaScript 可以使用类似于 canvas 和 web workers 来实现图像压缩。
使用 canvas，可以将图像绘制到 canvas 上，然后使用 canvas 提供的 toBlob() 或 toDataURL() 方法将其转换为不同格式的图像。在这些方法中指定图像质量参数即可实现压缩。
使用 web workers，可以在后台执行图像压缩，以避免阻塞 UI 线程。
但是 javascript 因为安全限制，不能操作本地文件，所以一般使用在浏览器端上传图片，使用js进行压缩处理，上传到服务端，后续处理。
在 JavaScript 中进行图像压缩有一些第三方库可供使用，比如：
- canvas-toBlob.js: 在不支持 toBlob() 的浏览器中提供对 toBlob() 的支持。
- lwip: 一个 JavaScript 的图像处理库，可以实现图像的压缩，旋转，裁剪等操作
- browser-image-resizer: 基于 canvas 和 web workers 的 JavaScript 图像压缩库。
- jpeg-js: 使用 JavaScript 实现的 JPEG 压缩库，可以在浏览器或 Node.js 环境中使用。
使用这些库进行压缩时需要注意的是，它们在性能上可能有所限制。对于大型图像，压缩可能需要相当长的时间。可能需要在用户上传图像时显示加载条或消息，以提醒用户正在进行压缩。
一、简单压缩
使用 JavaScript 和 canvas 压缩图像可以使用 canvas 的 drawImage() 方法将图像绘制到 canvas 上，然后使用 toDataURL() 方法将图像转换为 Data URL 形式。Data URL 是一种将数据嵌入 URL 的格式，可以在不需要网络请求的情况下直接在浏览器中加载图像。
在调用 toDataURL() 方法时，可以使用第二个参数来指定图像质量。该参数的值应该在 0 到 1 之间，表示图像质量的百分比。0 表示最低质量，1 表示最高质量。
这是一个使用 canvas 和 JavaScript 压缩图像的示例代码:
// 获取 canvas 元素
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// 创建 Image 对象
var img = new Image();
img.src = 'image.jpg';
img.onload = function() {
// 绘制图像到 canvas
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);
// 使用 toDataURL 方法压缩图像
var dataUrl = canvas.toDataURL('image/jpeg', 0.5);
// 使用新的 Data URL 更新图像
img.src = dataUrl;
}这个例子中，图片会使用 jpeg 格式压缩，质量为50%，压缩后的图片会被重新赋值回img.src里，可以改变其他参数得到不同的压缩效果
二、使用canvas 将base64 图像压缩到指定文件大小以内
1、 方法一
首先使用 atob() 函数将 base64 图像数据解码为二进制字符串，然后创建一个新的 Blob 对象，并使用 FileReader 读取 Blob 对象。
接下来，使用 canvas 的 drawImage() 方法将图像绘制到 canvas 上，并使用 canvas.toBlob() 方法将图像转换为 Blob 对象。
最后，检查生成的 Blob 的大小是否超过指定的最大大小。 如果超过，使用不同的图像质量再次压缩图像，直到它的大小小于给定的最大大小为止.
下面是一个示例代码：
var maxSize = 100 * 1024; // 最大文件大小为100KB
var img = new Image();
img.src = base64Image;
img.onload = function () {
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var width = img.width;
var height = img.height;
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0, width, height);
var quality = 0.8;
var resultBlob;
do {
canvas.toBlob(function (blob) {
resultBlob = blob;
}, 'image/jpeg', quality);
quality -= 0.1;
} while (resultBlob.size > maxSize && quality > 0.1);
// do something with resultBlob, like create a new image from it or save it.
}这个示例代码使用 canvas 将 base64 图像压缩到指定的最大文件大小以内。它使用了一个 do-while 循环来不断地减小图像质量直到图像的文件大小符合限制为止。最后它生成了一个 resultBlob 对象，它可以被用来更新页面上的图像或者存储到服务器上。