js如何压缩图片到指定大小
时间: 2024-09-12 22:10:18 浏览: 75
微信小程序上传图片并等比列压缩到指定大小的实例代码
在JavaScript中,压缩图片到指定大小通常需要依赖于第三方库,例如`image上传时自动压缩`或者`imgAreaSelect`等。这里有一个简单的例子,利用HTML5的`FileReader` API读取图片文件,然后使用`canvas`元素进行图片的绘制和压缩处理。
以下是一个基本步骤的例子:
1. 监听图片上传事件。
2. 读取图片文件并转换为`canvas`。
3. 根据指定大小调整`canvas`的尺寸。
4. 将调整后的图片绘制到`canvas`上,并转换为`blob`格式。
5. 用转换后的`blob`文件创建新的图片。
```javascript
// 假设有一个上传按钮的id是'upload-input'
document.getElementById('upload-input').addEventListener('change', function(e) {
const file = e.target.files[0]; // 获取上传的文件
if (!file.type.match('image.*')) {
return; // 非图片类型则直接返回
}
const img = new Image();
img.onload = function() {
let targetWidth = 800; // 指定的目标宽度
let targetHeight = 600; // 指定的目标高度
let canvas = document.createElement('canvas');
let scale = Math.min(targetWidth / img.width, targetHeight / img.height);
canvas.width = img.width * scale;
canvas.height = img.height * scale;
let ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
canvas.toBlob(function(blob) {
// 处理压缩后的图片blob对象
let newImg = document.createElement('img');
newImg.src = URL.createObjectURL(blob);
// 将新图片插入到页面中或者进行其他处理
document.body.appendChild(newImg);
}, file.type, 1); // 第三个参数是图片的质量,范围0-1,值越低,压缩后的图片质量越差,文件越小
};
img.src = URL.createObjectURL(file);
});
```
上述代码示例展示了基本的图片压缩处理流程。在实际应用中,可能需要根据具体情况调整压缩质量和尺寸以满足特定需求。
阅读全文