当处理媒体文件上传，特别是图片时，确实需要考虑用户体验和系统性能。大图片文件的上传可能导致加载时间过长，影响整体操作体验。
在前端，对上传的图片进行压缩处理是一种常见的优化手段。通过使用HTML5中的File API和Canvas API，我们可以实现在上传前在客户端对图片进行压缩的操作，从而提升用户交互体验。
在后台管理系统中，优化管理员的操作体验同样至关重要。过大的图片可能会占用过多系统资源，导致页面加载缓慢。通过在前端进行图片压缩，可以有效减小上传的文件大小，避免影响系统性能。
这样的优化不仅提高了用户上传图片的效率，也有助于保持系统的流畅性。同时，合理的图片处理策略也能防止在前端展示时因为图片过大而导致加载时间过长，从而提高整体用户体验。在实际项目中，我们可以结合后端技术，对上传的图片进行进一步处理和存储，以确保系统的高效性和可用性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>纯前端图片压缩</title>
</head>
<body>
<input type="file" id="file" />
<script>
// 参数内容
// options: {
// quality: 0.1 - 1, // 图片质量
// file: 文件, // 文件对象
// success: (base64) => void // 图片压缩后的回调函数
// }
class CompressorImg {
options = {}
// 创建一个文件对象
fileReader = new FileReader()
constructor(options) {
this.options = options
this.createBase64()
}
// 将文件对象转成 base64
createBase64() {
// 监听文件对象的变化
this.fileReader.onload = (e) => {
this.compress(e.target.result)
}
// 将 file 对象转成 base64
this.fileReader.readAsDataURL(this.options.file)
}
// 图片压缩
compress(url) {
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
const img = new Image()
img.src = url
img.onload = () => {
canvas.width = img.width
canvas.height = img.height
ctx.drawImage(img, 0, 0, img.width, img.height)
const base64 = canvas.toDataURL(this.options.file.type, this.options.quality)
this.options.success(base64)
}
}
}
document.querySelector('#file').addEventListener('change', (e) => {
const file = e.target.files[0]
file && new CompressorImg({
file,
quality: 0.1,
success: (base64) => {
document.body.innerHTML = `<img src="${base64}" />`
// 压缩后的 base64
console.log(base64, '结果')
}
})
})
</script>
</body>
</html>