用户有时上传图片过大，需要将用户上传的图片压缩后给到后端
实现思路
1、先将图片的file文件转成baseURL
2、创建一个image标签去接收文件获取图片的宽高和比例。
3、创建canvas画布设置画布的大小。
4、将图片绘制到canvas上面。
5、对canvas进行压缩处理，获得新的baseURL
6、将baseURL转化回文件。
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<input type="file" id="upload">
<script>
const ACCEPT = ['image/jpg', 'image/png', 'image/jpeg'];
const MAXSIZE = 3 * 1024 * 1024;
const MAXSIZE_STR = '3MB';
function convertImageToBase64(file, callback) {
// FileReader 读取文件
let reader = new FileReader();
reader.addEventListener('load', function(e) {
const base64Image = e.target.result;
callback && callback(base64Image);
// 回收机制
reader = null;
});
// 将文件读取为 DataURL
reader.readAsDataURL(file);
}
// 对图片压缩核心代码（创建一个img,主要获取宽高,对图片进行压缩，使用canvas进行绘制）
function compress(base64Image, callback) {
let maxW = 1024;
let maxH = 1024;
const image = new Image();
image.addEventListener('load', function(e) {
let ratio; // 图片的压缩比
let needCompress = false; // 是否需要压缩
if (maxW < image.naturalWidth) {
needCompress = true;
ratio = image.naturalWidth / maxW;
maxH = image.naturalHeight / ratio;
}
if (maxH < image.naturalHeight) {
needCompress = true;
ratio = image.naturalHeight / maxH;
maxW = image.naturalWidth / ratio;
}
// 如果不需要压缩，需要获取图片的实际尺寸
if (!needCompress) {
maxW = image.naturalWidth;
maxH = image.naturalHeight;
}
const canvas = document.createElement('canvas');
canvas.setAttribute('id', '__compress__');
canvas.width = maxW;
canvas.height = maxH;
canvas.style.visibility = 'hidden';
document.body.appendChild(canvas);
const ctx = canvas.getContext('2d');
// 清空矩形像素
ctx.clearRect(0, 0, maxW, maxH);
ctx.drawImage(image, 0, 0, maxW, maxH);
const compressImage = canvas.toDataURL('image/jpeg', 0.6);
callback && callback(compressImage);
/* 显示压缩后的图片 start*/
const _img = new Image()
_img.src = compressImage
document.body.appendChild(_img);
/* 显示压缩后的图片 end*/
canvas.remove();
});
image.src = base64Image;
}
// 上传到服务器
function uploadToServer(compressImage) {
console.log('upload to server...', compressImage);
}
const upload = document.getElementById('upload');
upload.addEventListener('change', function(e) {
const [file] = e.target.files;
if (!file) return;
const { type: fileType, size: fileSize } = file;
// 图片类型检查
if (!ACCEPT.includes(fileType)) {
alert(`不支持[${fileType}]文件类型！`);
upload.value = '';
return;
}
// 图片容量检查
if (fileSize > MAXSIZE) {
alert(`文件超出${MAXSIZE_STR}！`);
upload.value = '';
return;
}
// 压缩图片
convertImageToBase64(file, (base64Image) => compress(base64Image, uploadToServer));
})
</script>
</body>
</html>
网友评论