js压缩图片到指定大小
时间: 2024-04-08 15:07:36 浏览: 16
可以使用HTML5的Canvas API来压缩图片,并限制图片的大小。以下是一个示例代码:
```javascript
function compressImage(file, maxSize, callback) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(event) {
var img = new Image();
img.src = event.target.result;
img.onload = function() {
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var width = img.width;
var height = img.height;
var ratio = width / height;
if (width > height && width > maxSize) {
width = maxSize;
height = width / ratio;
} else if (height > width && height > maxSize) {
height = maxSize;
width = height * ratio;
}
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0, width, height);
canvas.toBlob(function(blob) {
callback(blob);
}, file.type);
}
}
}
```
使用方式:
```javascript
var fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', function() {
var file = fileInput.files[0];
compressImage(file, 1024, function(blob) {
// blob即为压缩后的图片文件
console.log('压缩后的文件大小:', blob.size);
});
});
```
其中,`maxSize`参数表示限制的最大文件大小,单位为字节。在上述示例代码中,我们将图片压缩到宽度或高度等于`maxSize`的尺寸,并保持原始宽高比。你可以根据实际需求进行调整。