2024-07-12
한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina
La compression d'images joue un rôle crucial dans de nombreux scénarios d'application, en particulier lorsque le client télécharge des images. Les images originales sont souvent de grande taille. Le téléchargement direct consomme non seulement beaucoup de ressources en bande passante, mais peut également entraîner des vitesses de téléchargement lentes, affectant sérieusement l'expérience utilisateur. Par conséquent, compresser les images avant de les télécharger sur le serveur est devenue une mesure d’optimisation clé. Grâce à la compression, la taille des fichiers image est considérablement réduite, accélérant ainsi les vitesses de téléchargement, améliorant l'efficacité et garantissant aux utilisateurs une expérience fluide et sans tracas. Cette optimisation est particulièrement importante lorsque les conditions du réseau sont mauvaises.
En bref, la compression d'images peut résoudre efficacement les problèmes de pression sur la bande passante et de temps causés par le téléchargement de fichiers volumineux. Il s'agit d'un moyen efficace pour améliorer la vitesse de réponse des applications et accroître la satisfaction des utilisateurs. Il traite intelligemment les images, supprime les données redondantes et réduit considérablement la taille des fichiers tout en conservant autant que possible la qualité visuelle, rendant le processus de téléchargement d'images plus rapide et plus efficace, optimisant ainsi les performances de l'ensemble de l'application.
<!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>
Il se consacre à la recherche technologique depuis plus de 30 ans et maîtrise divers langages tels que java, linux, javascript, php, css, etc. Il a apporté de nombreuses contributions dans le domaine de l'open source. station de documentation pour les développeurs pour partager certains problèmes de développement technologique pour référence future.
