Mi informacion de contacto
Correo[email protected]
2024-07-12
한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina
La compresión de imágenes juega un papel crucial en muchos escenarios de aplicaciones, especialmente cuando el cliente carga imágenes. Las imágenes originales suelen tener un tamaño grande. La carga directa no solo consume muchos recursos de ancho de banda, sino que también puede provocar velocidades de carga lentas, lo que afecta seriamente la experiencia del usuario. Por tanto, comprimir imágenes antes de subirlas al servidor se ha convertido en una medida de optimización clave. A través de la compresión, el tamaño de los archivos de imagen se reduce significativamente, lo que acelera las velocidades de carga, mejora la eficiencia y garantiza que los usuarios tengan una experiencia fluida y sin complicaciones. Esta optimización es particularmente importante cuando las condiciones de la red son malas.
En resumen, la compresión de imágenes puede resolver eficazmente la presión del ancho de banda y los problemas de costo de tiempo causados por la carga de archivos grandes. Es un medio eficaz para mejorar la velocidad de respuesta de la aplicación y mejorar la satisfacción del usuario. Procesa imágenes de manera inteligente, elimina datos redundantes y reduce en gran medida el tamaño del archivo mientras mantiene la calidad visual tanto como sea posible, lo que hace que el proceso de carga de imágenes sea más rápido y eficiente, optimizando así el rendimiento de toda la aplicación.
<!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>
Se ha dedicado a la investigación de tecnología durante más de 30 años y domina varios lenguajes como java, linux, javascript, php, css, etc. Ha realizado muchas contribuciones en el campo del código abierto. Estación de documentación para desarrolladores para compartir algunos problemas en el desarrollo de tecnología para referencia futura.
Correo[email protected]