2024-07-12
한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina
बहुषु अनुप्रयोगपरिदृश्येषु चित्रसंपीडनं महत्त्वपूर्णां भूमिकां निर्वहति, विशेषतः यदा ग्राहकः चित्राणि अपलोड् करोति । मूलचित्रं प्रायः आकारेण बृहत् भवति । अतः सर्वरे अपलोड् कर्तुं पूर्वं चित्राणि संपीडयितुं प्रमुखं अनुकूलनमापं जातम् । संपीडनस्य माध्यमेन चित्रसञ्चिकानां आकारः महत्त्वपूर्णतया न्यूनीकरोति, तस्मात् अपलोड्-वेगः त्वरितः भवति, कार्यक्षमतायां सुधारः भवति, उपयोक्तृभ्यः सुचारुः, उपद्रव-रहितः च अनुभवः भवति इति सुनिश्चितं भवति
संक्षेपेण, चित्रसंपीडनं बृहत् सञ्चिकानां अपलोड् कृत्वा उत्पद्यमानानां बैण्डविड्थ-दबावस्य समय-व्ययस्य च समस्यानां समाधानं प्रभावीरूपेण कर्तुं शक्नोति । इदं बुद्धिपूर्वकं चित्राणि संसाधयति, अनावश्यकदत्तांशं निष्कासयति, दृश्यगुणवत्तां यथासम्भवं निर्वाहयन् सञ्चिकायाः आकारं बहु न्यूनीकरोति, येन चित्रस्य अपलोड् प्रक्रिया द्रुततरं अधिकं च कार्यक्षमं भवति, तस्मात् सम्पूर्णस्य अनुप्रयोगस्य कार्यक्षमतां अनुकूलतां प्राप्नोति
<!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>