基础概念: 图片压缩是一种减少图像数据量的技术,以便更快地传输和存储。Base64 是一种编码格式,它可以将二进制数据转换为 ASCII 字符串,常用于在 HTML 或 JavaScript 中嵌入图像数据。
优势:
类型:
应用场景:
遇到的问题及原因: 在使用 JavaScript 进行 Base64 图片压缩时,可能会遇到以下问题:
解决方案:
示例代码: 以下是一个简单的 JavaScript 示例,展示如何将图片转换为 Base64 编码并进行压缩:
function compressImage(file, maxWidth, maxHeight, quality) {
return new Promise((resolve, reject) => {
const img = new Image();
img.src = URL.createObjectURL(file);
img.onload = () => {
const canvas = document.createElement('canvas');
let width = img.width;
let height = img.height;
if (width > height) {
if (width > maxWidth) {
height *= maxWidth / width;
width = maxWidth;
}
} else {
if (height > maxHeight) {
width *= maxHeight / height;
height = maxHeight;
}
}
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, width, height);
canvas.toBlob((blob) => {
const reader = new FileReader();
reader.onloadend = () => resolve(reader.result);
reader.onerror = reject;
reader.readAsDataURL(blob);
}, 'image/jpeg', quality);
};
img.onerror = reject;
});
}
// 使用示例
const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', async (event) => {
const file = event.target.files[0];
try {
const compressedBase64 = await compressImage(file, 800, 600, 0.8);
console.log(compressedBase64);
} catch (error) {
console.error('压缩失败:', error);
}
});
这段代码首先创建一个 Image
对象来加载文件,然后在图片加载完成后,使用 canvas
进行尺寸调整和质量压缩,最后将压缩后的图片转换为 Base64 编码。
没有搜到相关的文章