2024-07-12
한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina
Compressio imaginis munere funguntur in multis missionibus applicationis, praesertim cum imagines imaginum onerationum clientium. Imagines originales saepe magnae sunt in magnitudine. Directe impositio non solum multum consumit opes, sed etiam celeritates onerationis tardae causant, experientiam usoris graviter afficiens. Ideo imagines comprimentes antequam eas iungant servo facta est mensura optimae clavis. Per compressionem, magnitudo imaginum imaginum signanter minuitur, ita ut celeritates onerarias acceleraret, efficientiam augens, utentium usus lenis et libera experientia est.
In summa, compressio imaginis efficaciter potest solvere band pressionis et temporis dispendii problemata, quae magnas tabulas imponunt. Intelligenter imagines imaginum procedit, notitias redundantes removet, et amplitudinem limam valde minuit, servata qualitatem visualium quantum fieri potest, imaginem processus onerationis velociorem et efficaciorem faciens, per quod optimizing effectus totius applicationis.
<!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>