JavaScript本身没有提供压缩图片的方法，但是可以使用第三方库或API来实现。
一种常用的方法是使用canvas，将图片绘制到canvas上，再将canvas转换为图片格式。在绘制时可以控制canvas的尺寸，从而达到压缩图片的效果。以下是一个基础的示例代码：
function compressImage(file, maxWidth, maxHeight, quality, callback) {
const reader = new FileReader();
reader.onload = function () {
const img = new Image();
img.onload = function () {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
let width = img.width;
let height = img.height;
if (width > maxWidth) {
height *= maxWidth / width;
width = maxWidth;
}
if (height > maxHeight) {
width *= maxHeight / height;
height = maxHeight;
}
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0, width, height);
const result = canvas.toDataURL('image/jpeg', quality);
callback(result);
};
img.src = reader.result;
};
reader.readAsDataURL(file);
}
const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', function () {
const file = fileInput.files[0];
compressImage(file, 800, 800, 0.7, function (result) {
const img = document.createElement('img');
img.src = result;
document.body.appendChild(img);
});
});
在这个实现中，我们使用了 toDataURL 方法将 `
如何保证图片的清晰度 在实现图片压缩时，为了保证图片的清晰度，我们需要注意以下几个方面：
-
控制压缩质量：在使用 canvas 或其他压缩算法时，可以通过调整压缩质量来控制图片的清晰度。一般来说，压缩质量越高，图片的清晰度越高，但文件大小也会相应增加。因此需要根据具体情况选择合适的压缩质量。
-
控制压缩尺寸：在调整图片尺寸时，需要保证压缩后的图片尺寸与原始图片比例相同，否则会导致图片变形。同时，压缩后的尺寸也需要根据具体情况进行调整，以保证图片的清晰度。
-
避免重复压缩：如果对同一张图片进行多次压缩，会导致图片失真和清晰度降低。因此在实现图片压缩时，需要避免重复压缩。
-
使用高质量的压缩算法：除了 canvas 和其他常见的压缩算法外，还可以使用一些高质量的压缩算法，例如 pngquant、mozjpeg 等。这些算法可以在保证压缩质量的同时减少文件大小，从而保证图片的清晰度。
需要注意的是，图片压缩不是一种万能的解决方案，有些情况下需要使用高分辨率的图片才能保证清晰度，例如在印刷品设计中。因此在实际应用中，需要根据具体情况进行选择和调整。
压缩图片常用的js插件 以下是一些常用的 JavaScript 图片压缩插件：
-
compressorjs: 一个轻量级的 JavaScript 图片压缩库，支持压缩 JPEG、PNG、GIF、SVG 等常见图片格式，可以在浏览器和 Node.js 中使用。 -
pica: 一个基于 Web worker 的 JavaScript 图片处理库，可以实现图片压缩、缩放、旋转等功能。该库支持多种压缩算法，并可以调整压缩质量和尺寸，以满足不同场景的需求。 -
image-compressor: 一个基于 HTML5 Canvas 和 File API 的 JavaScript 图片压缩库，可以压缩 JPEG、PNG 和 GIF 格式的图片，并支持调整压缩质量和尺寸。该库支持在浏览器和 Node.js 中使用。 -
jpeg-js: 一个基于 JavaScript 的 JPEG 图片编解码库，可以实现 JPEG 图片的压缩和解压缩功能。该库支持在浏览器和 Node.js 中使用，并提供了多种压缩算法和参数选项。 -
sharp: 一个基于 Node.js 的高性能图片处理库，可以实现图片压缩、缩放、裁剪等功能。该库支持多种图片格式和压缩算法，并可以调整压缩质量和尺寸，以满足不同场景的需求。
这些插件都提供了丰富的功能和选项，可以根据具体的需求来选择和使用。需要注意的是，在使用这些插件时，需要根据具体情况来选择压缩比例和算法，以保证图片质量和数据量之间的平衡。
compressorjs 使用方法和举例
compressorjs 是一个轻量级的 JavaScript 图片压缩库，可以在浏览器和 Node.js 中使用。下面是 compressorjs 的使用方法和一个简单的示例。
安装
可以使用 npm 进行安装：
npm install compressorjs --save
也可以直接在 HTML 页面中通过 script 标签引入：
<script src="https://unpkg.com/compressorjs@^1.0.5/dist/compressor.min.js"></script>
使用
压缩图片
可以使用 Compressor 类来压缩图片，该类提供了多种选项和回调函数，可以根据具体情况来选择和使用。
// 创建 Compressor 实例
var compressor = new Compressor(file, {
quality: 0.6, // 压缩质量，取值范围 0 ~ 1，默认为 0.8
maxWidth: 800, // 最大宽度，单位像素，默认为 undefined
maxHeight: 800, // 最大高度，单位像素，默认为 undefined
mimeType: 'image/jpeg', // 输出图片 MIME 类型，默认为原始图片 MIME 类型
success: function(result) {
// 压缩成功后的回调函数，result 为压缩后的 Blob 对象
console.log(result);
},
error: function(err) {
// 压缩失败后的回调函数，err 为错误对象
console.log(err.message);
},
});
其中，file 为原始图片的 File 对象，可以通过 input、drop 等方式获取。在压缩图片时，可以设置多个选项，以控制压缩质量、尺寸、格式等。压缩成功后，会调用 success 回调函数，将压缩后的 Blob 对象作为参数传递。压缩失败后，会调用 error 回调函数，将错误对象作为参数传递。
示例
下面是一个简单的
更多
压缩图片的示例，可以通过该示例来了解 compressorjs 的使用方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Compressor.js 示例</title>
</head>
<body>
<input type="file" accept="image/*" onchange="compressImage(this)">
<script src="https://unpkg.com/compressorjs@^1.0.5/dist/compressor.min.js"></script>
<script>
function compressImage(input) {
var file = input.files[0];
var options = {
quality: 0.6,
maxWidth: 800,
maxHeight: 800,
mimeType: 'image/jpeg',
success: function(result) {
var img = new Image();
img.src = URL.createObjectURL(result);
img.onload = function() {
URL.revokeObjectURL(this.src);
document.body.appendChild(img);
};
},
error: function(err) {
console.log(err.message);
},
};
new Compressor(file, options);
}
</script>
</body>
</html>
