کلاس ImageCompressor

مستندات کلاس ImageCompressor برای فشرده‌سازی تصاویر در Appsan

قابل دسترسی از ورژن jsscript:0.1.65

کلاس ImageCompressor به توسعه‌دهندگان امکان می‌دهد تا تصاویر را با گزینه‌های متنوعی مانند کیفیت، فرمت فشرده‌سازی و اندازه، فشرده کنند. در ادامه توضیحات و نمونه‌هایی از استفاده این کلاس ارائه شده است.

توضیحات عمومی:

کلاس ImageCompressor می‌تواند برای فشرده‌سازی فایل‌های تصویری، رشته‌های base64، و همچنین فایل‌های Blob استفاده شود. این کلاس متدی به نام compress دارد که با فراخوانی آن می‌توان عملیات فشرده‌سازی را بر روی داده‌های تصویری انجام داد. این کلاس از Promise برای مدیریت نتایج فشرده‌سازی استفاده می‌کند و امکان تعریف توابع موفقیت و خطا وجود دارد.

نحوه استفاده از ImageCompressor:

برای استفاده از این کلاس، ابتدا باید یک شیء از کلاس ImageCompressor ساخته شود و سپس متد compress برای فشرده‌سازی فراخوانی گردد.

ساختار پایه:

const compressor = new ImageCompressor();
compressor.compress(imageData, options)
    .subscribe(
        (compressedFile) => {
            // عملیات موفق
            console.log('فایل فشرده شد:', compressedFile);
        },
        (error) => {
            // عملیات ناموفق
            console.error('خطا در فشرده‌سازی:', error);
        }
    );

پارامترهای متد compress:

• imageData: داده تصویری که می‌تواند یک فایل، Blob یا یک رشته base64 باشد.
• options (اختیاری): شیئی که شامل تنظیمات فشرده‌سازی است.

تنظیمات (Options):

تنظیمات فشرده‌سازی شامل موارد زیر است که می‌توانند به صورت دلخواه تعیین شوند:

• maxWidth: حداکثر عرض تصویر.
• maxHeight: حداکثر ارتفاع تصویر.
• quality: کیفیت تصویر فشرده‌شده (مقداری بین ۰ و ۱).
• compressFormat: فرمت خروجی فشرده‌سازی (مانند JPEG, PNG, WEBP).

نمونه کد Appsan UI:

<page title="">
    <text text="تست فشرده‌ساز"/>
    <button text="انتخاب از گالری" onclick="imagepicker/gallery->script/script:fileSelected($data)"/>
    <button text="انتخاب از دوربین" onclick="imagepicker/camera->script/script:fileSelected($data)"/>

    <button text="فشرده‌سازی فایل" onclick="script/script:compress('file')"/>
    <button text="فشرده‌سازی base64" onclick="script/script:compress('base64')"/>
    <button text="فشرده‌سازی null" onclick="script/script:compress('null')"/>
    <button text="فشرده‌سازی نوع نامعتبر" onclick="script/script:compress('invalid')"/>

    <img id="img" width="match_parent" height="300"/>
    <text id="size" text=""/>

    <script id="script">
        var selectedFile;
        var base64Image = "داده Base64";

        function fileSelected(files) {
            selectedFile = files[0];
            console.log(files);
        }

        function compress(type) {
            const compressor = new ImageCompressor();
            let imageData;
            if (type === 'file') {
                imageData = selectedFile;
            } else if (type === 'base64') {
                imageData = base64Image;
            } else if (type === 'null') {
                imageData = null;
            } else if (type === 'invalid') {
                imageData = 12345; // نوع نامعتبر
            }

            const options = {
                maxWidth: 800,
                quality: 0.9,
                compressFormat: 'WEBP'
            };

            compressor.compress(imageData, options).subscribe(compressedFile => {
                console.log('فایل فشرده‌شده:', compressedFile);
                Appsan.runAction("snackbar/'فایل با موفقیت فشرده شد.'");

                const reader = new FileReader();
                reader.onload = function() {
                    const base64Data = reader.result.split(',')[1];
                    Appsan.setProperty('img', 'src', 'base64://' + base64Data);
                    const size = base64Data.length * 0.75;
                    Appsan.setProperty('size', 'text', 'حجم: ' + size + ' بایت');
                };
                reader.readAsDataURL(compressedFile);

            }, error => {
                console.error('خطا در فشرده‌سازی:', error);
                Appsan.runAction("snackbar/'فشرده‌سازی ناموفق بود: " + error.message + "'");
            });
        }
    </script>
</page>

توضیح جاوا اسکریپت:

• تابع fileSelected: فایل انتخاب‌شده از گالری یا دوربین را ذخیره می‌کند.
• تابع compress: بسته به نوع داده ورودی، تصویر را فشرده‌سازی می‌کند و نتیجه آن را نمایش می‌دهد.
• options: تنظیمات فشرده‌سازی مانند حداکثر عرض و کیفیت در اینجا مشخص شده‌اند.