js压缩图片并上传,不失真,保证图片清晰度
时间: 2023-08-18 17:04:03 浏览: 71
在JavaScript中,可以使用HTML5的Canvas API来压缩图片。以下是一个基本的例子:
```javascript
//选择文件并获取图片对象
const input = document.querySelector('input[type="file"]');
const img = new Image();
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
input.addEventListener('change', () => {
const file = input.files[0];
const reader = new FileReader();
reader.onload = () => {
img.onload = () => {
//设置canvas的宽高
canvas.width = img.width;
canvas.height = img.height;
//将图片绘制在canvas上
ctx.drawImage(img, 0, 0);
//将canvas转换为DataURL
const dataURL = canvas.toDataURL('image/jpeg', 0.7); //0.7为压缩质量,范围从0到1
//将DataURL转换为Blob对象
const blob = dataURLtoBlob(dataURL);
//上传Blob对象
uploadBlob(blob);
};
img.src = reader.result;
};
reader.readAsDataURL(file);
});
//将DataURL转换为Blob对象
function dataURLtoBlob(dataURL) {
const arr = dataURL.split(',');
const mime = arr[0].match(/:(.*?);/)[1];
const bstr = atob(arr[1]);
let n = bstr.length;
const u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
}
//上传Blob对象
function uploadBlob(blob) {
const formData = new FormData();
formData.append('file', blob, 'filename.jpg');
//使用XMLHttpRequest或fetch发送formData
}
```
这个例子中,我们使用了Canvas API将图片绘制在Canvas上,并将Canvas转换为DataURL。然后,我们将DataURL转换为Blob对象,并上传Blob对象。
为了保证图片清晰度,在转换为DataURL时,我们可以设置压缩质量。较高的压缩质量会导致文件大小较大,较低的压缩质量会导致图片失真。根据实际需求,可以选择合适的压缩质量。