2024-07-12
한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina
Die Bildkomprimierung spielt in vielen Anwendungsszenarien eine entscheidende Rolle, insbesondere wenn der Client Bilder hochlädt. Originalbilder sind oft groß. Das direkte Hochladen verbraucht nicht nur viele Bandbreitenressourcen, sondern kann auch zu langsamen Upload-Geschwindigkeiten führen, was die Benutzererfahrung erheblich beeinträchtigt. Daher ist das Komprimieren von Bildern vor dem Hochladen auf den Server zu einer wichtigen Optimierungsmaßnahme geworden. Durch die Komprimierung wird die Größe der Bilddateien erheblich reduziert, wodurch die Upload-Geschwindigkeit beschleunigt, die Effizienz verbessert und ein reibungsloses und problemloses Erlebnis für die Benutzer gewährleistet wird. Diese Optimierung ist besonders wichtig, wenn die Netzwerkbedingungen schlecht sind.
Kurz gesagt, die Bildkomprimierung kann den Bandbreitendruck und die Zeitkostenprobleme, die durch das Hochladen großer Dateien entstehen, effektiv lösen. Sie ist ein wirksames Mittel, um die Reaktionsgeschwindigkeit von Anwendungen zu verbessern und die Benutzerzufriedenheit zu steigern. Es verarbeitet Bilder intelligent, entfernt redundante Daten und reduziert die Dateigröße erheblich, während die visuelle Qualität so weit wie möglich erhalten bleibt, wodurch der Bild-Upload-Prozess schneller und effizienter wird und dadurch die Leistung der gesamten Anwendung optimiert wird.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
div {
text-align: center;
}
input {
height: 50px;
line-height: 50px;
}
</style>
</head>
<body>
<input id="file" type="file" accept="image/*">
<div>压缩前的图片大小：<span id="beforeSize"></span>
<p><img id="before" /></p>
</div>
<div>压缩后的图片大小：<span id="afterSize"></span>
<p>
<img id="after" />
</p>
</div>
<script>
$("#file").change(function () {
const file = this.files[0];
$("#before").attr("src", URL.createObjectURL(file));
$("#before").css({
width: '500',
height: 'auto'
});
const fileSize = file.size / 1024;
$("#beforeSize").html(fileSize.toFixed(2) + " KB");
if (!file) return;
compressImage(file, 1, 0.7).then(base64 => {
$("#after").attr("src", base64);
$("#after").css({
width: '500',
height: 'auto'
});
const sizeInKB = (base64.length * 3 / 4) / 1024;
$("#afterSize").html(sizeInKB.toFixed(2) + " KB");
});
});
function compressImage(file, maxWidth, quality) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = function (e) {
const img = new Image();
img.onload = function () {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
resolve(canvas.toDataURL('image/jpeg', quality || 0.9));
};
img.src = e.target.result;
};
reader.readAsDataURL(file);
});
}
</script>
</body>
</html>
Er widmet sich seit mehr als 30 Jahren der Technologieforschung und beherrscht verschiedene Sprachen wie Java, Linux, Javascript, PHP, CSS usw. Er hat viele Beiträge im Open-Source-Bereich geleistet Entwicklerdokumentationsstation, um einige Themen in der Technologieentwicklung als zukünftige Referenz zu teilen
