HTML، CSS اور JavaScript کا استعمال کرتے ہوئے بلک امیج کمپریسر ٹول کیسے بنایا جائے

ہائی ریزولوشن والی تصاویر اچھی لگ سکتی ہیں، لیکن وہ صفحہ لوڈ ہونے کے اوقات کو نمایاں طور پر سست کر سکتی ہیں اور بہت زیادہ ذخیرہ کرنے کی جگہ استعمال کر سکتی ہیں۔

اگرچہ بیک اینڈ کمپریشن ٹولز عام ہیں، لیکن کلائنٹ سائیڈ امیج کمپریسر بنانا رازداری کے زبردست فوائد فراہم کرتا ہے۔ براہ راست براؤزر میں تصاویر پر کارروائی کرنے سے، صارف کا ڈیٹا کبھی بھی سرور کو نہیں چھوتا۔

اس ٹیوٹوریل میں، آپ سیکھیں گے کہ مکمل خصوصیات والا، براؤزر پر مبنی بلک امیج کمپریسر کیسے بنایا جائے۔ HTML5 کینوس API کا استعمال کرتے ہوئے تصویری فائل کے سائز کو کم کریں اور ایک سے زیادہ کمپریسڈ فائلوں کو ایک آسان زپ ڈاؤن لوڈ میں پیک کرنے کے لیے JSZip لائبریری کو ضم کریں۔

اس پروجیکٹ کو بہت عملی بنانے کے لیے، ہم کوڈ کو ایمبیڈ ایبل ویجٹس میں ترتیب دیتے ہیں۔ معیاری HTML بوائلر پلیٹ ٹیگز کو چھوڑ کر، آپ آسانی سے اس کوڈ کے ٹکڑوں کو براہ راست ورڈپریس کسٹم HTML بلاک یا کسی اور CMS میں لے آؤٹ تنازعات پیدا کیے بغیر رکھ سکتے ہیں۔

شرطیں

پیروی کرنے کے لیے، آپ کو اس کی بنیادی سمجھ ہونی چاہیے:

• ایچ ٹی ایم ایل اور سی ایس ایس: UI کو کنفیگر کریں اور انٹرایکٹو ہوور/ڈریگ سٹیٹس بنائیں۔

• جاوا اسکرپٹ کا وعدہ: غیر مطابقت پذیر کارروائیوں کو ہینڈل کرتا ہے جیسے فائلوں کو پڑھنا اور زپ بنانا۔

• کینوس API: براؤزر مقامی طور پر سمجھتے ہیں کہ تصویری ڈیٹا کو کس طرح کھینچنا اور جوڑنا ہے۔

انڈیکس

مرحلہ 1: ایچ ٹی ایم ایل کا ڈھانچہ بنانا

سب سے پہلے ہمیں ایک بصری انٹرفیس بنانے کی ضرورت ہے۔ ڈریگ اینڈ ڈراپ ایریاز، غیر مرئی فائل ان پٹ، اور ایک پوشیدہ ایکشن پینل بنائیں جو اس وقت ظاہر ہوتا ہے جب صارف کوئی تصویر منتخب کرتا ہے۔

فائل میں درج ذیل کوڈ شامل کریں: نوٹ کریں کہ اسکرپٹ میں بعد میں رسائی کے لیے سب سے اوپر JSZip CDN لنک شامل ہے۔

 {
    const dropzone = document.getElementById('icDropzone');
    const fileInput = document.getElementById('icFileInput');
    const browseBtn = document.getElementById('icBrowseBtn');
    const actionPanel = document.getElementById('icActionPanel');
    const statusText = document.getElementById('icStatusText');
    const compressBtn = document.getElementById('icCompressBtn');
    
    let filesArray = [];

    // 1. Handle File Input and Drag & Drop
    browseBtn.addEventListener('click', (e) => {
        e.stopPropagation();
        fileInput.click();
    });
    
    dropzone.addEventListener('dragover', (e) => {
        e.preventDefault();
        dropzone.classList.add('dragover');
    });
    
    dropzone.addEventListener('dragleave', () => {
        dropzone.classList.remove('dragover');
    });
    
    dropzone.addEventListener('drop', (e) => {
        e.preventDefault();
        dropzone.classList.remove('dragover');
        if (e.dataTransfer.files.length) {
            processSelectedFiles(e.dataTransfer.files);
        }
    });

    fileInput.addEventListener('change', () => {
        if (fileInput.files.length) {
            processSelectedFiles(fileInput.files);
        }
    });

    // 2. Validate and Display the Action Panel
    function processSelectedFiles(files) {
        filesArray = Array.from(files).filter(file => file.type.startsWith('image/'));
        if (filesArray.length > 0) {
            actionPanel.style.display = 'block';
            statusText.innerText = `${filesArray.length} image(s) selected. Ready to compress.`;
        }
    }

    // 3. The Core Compression Engine
    function compressImage(file) {
        return new Promise((resolve) => {
            const reader = new FileReader();
            reader.onload = (event) => {
                const img = new Image();
                img.onload = () => {
                    const canvas = document.createElement('canvas');
                    canvas.width = img.width;
                    canvas.height = img.height;
                    const ctx = canvas.getContext('2d');
                    
                    // Draw the image onto the canvas
                    ctx.drawImage(img, 0, 0);
                    
                    // Force compatibility: Convert unusual formats to JPEG or WebP
                    let mimeType = file.type;
                    if (mimeType !== 'image/jpeg' && mimeType !== 'image/webp') {
                        mimeType="image/jpeg";
                    }
                    
                    // Compress using the canvas.toBlob method at 70% quality (0.7)
                    canvas.toBlob((blob) => {
                        let finalName = file.name;
                        
                        // Ensure the file extension matches the new mimeType
                        if (mimeType === 'image/jpeg' && !finalName.match(/\.(jpg|jpeg)$/i)) {
                            finalName = finalName.substring(0, finalName.lastIndexOf('.')) + '.jpg';
                        }
                        
                        resolve({ name: finalName, blob: blob });
                    }, mimeType, 0.7); 
                };
                img.src = event.target.result;
            };
            reader.readAsDataURL(file);
        });
    }

    // 4. Handle the Bulk ZIP Process
    compressBtn.addEventListener('click', async () => {
        if (filesArray.length === 0) return;
        
        compressBtn.disabled = true;
        
        try {
            const zip = new JSZip();
            const folder = zip.folder("compressed_images");
            
            // Loop through each file and await its compression
            for (let i = 0; i < filesArray.length; i++) {
                statusText.innerText = `Compressing ${i + 1} of ${filesArray.length}...`;
                const compressedData = await compressImage(filesArray[i]);
                folder.file(compressedData.name, compressedData.blob);
            }
            
            statusText.innerText="Creating ZIP file...";
            
            // Generate and trigger the ZIP download
            const zipContent = await zip.generateAsync({ type: "blob" });
            const downloadLink = document.createElement('a');
            downloadLink.href = URL.createObjectURL(zipContent);
            downloadLink.download = "compressed_images.zip";
            downloadLink.click();
            
            statusText.innerText="Download successful!";
        } catch (error) {
            statusText.innerText="An error occurred during compression.";
            console.error(error);
        } finally {
            compressBtn.disabled = false;
        }
    });
});
]]>

جاوا اسکرپٹ کو سمجھنا:

• واقعات کو گھسیٹیں اور چھوڑیں: کہ dragover, dragleaveاور drop ایونٹ کے سننے والے مل کر کام کرتے ہیں تاکہ صارف کے ڈیسک ٹاپ سے براہ راست براؤزر ونڈو میں گھسیٹ کر لائی گئی فائلوں کو پکڑ سکیں۔

• کینوس کی ترکیبیں: براؤزر اپنے طور پر فائلوں کو جادوئی طور پر کمپریس نہیں کر سکتے۔ بجائے، compressImage فنکشن ایک تصویر کو پڑھتا ہے اور اسے HTML5 پوشیدہ میں کھینچتا ہے۔ پھر canvas.toBlob() اس تصویر کا نیا، آپٹمائزڈ ورژن کیسے برآمد کیا جائے۔ کہ 0.7 دلیل کمپریشن کوالٹی کو 70% پر سیٹ کرتی ہے۔

• توسیعی پروسیسنگ: کینوس تصاویر کو JPEG یا WebP کے طور پر برآمد کرتا ہے، اس لیے اسکرپٹ فائل ایکسٹینشن کو فعال طور پر چیک کرتا ہے اور اس کا نام تبدیل کرتا ہے، جیسے .png فائل کا نام .jpg) پیکیجنگ سے پہلے۔

• غیر مطابقت پذیر کمپریشن: کوئی راستہ نہیں for لوپ مقصد await ہر تصویر کو ترتیب وار کمپریس کریں۔ مکمل ہونے کے بعد، JSZip بلاب کو ایک فولڈر میں بنڈل کرتا ہے اور عارضی اینکر پر ایک پروگرامیٹک کلک ایونٹ کو متحرک کرتا ہے۔ حتمی ڈاؤن لوڈ کے لیے ٹیگز .zip فائل