راهنمای ساخت کلاژ تصویر

چندین تصویر را در قالب‌های شبکه‌ای، آزاد یا مجله‌ای ترکیب کنید. فاصله، حاشیه‌ها، رنگ پس‌زمینه و نسبت ابعاد را تنظیم کنید. تمام عملیات به صورت محلی در مرورگر شما اجرا می‌شود — هیچ فایلی به سرور ارسال نمی‌شود.

آنچه نیاز دارید

مرورگر — کروم، فایرفاکس، سافاری یا اج با پشتیبانی از OffscreenCanvas فرمت‌ها — JPG، JPEG، PNG، WEBP، AVIF، GIF، BMP یا TIFF محدودیت — ۲۰ مگابایت برای هر فایل (فایل‌های بیش از ۲۰ مگابایت رد می‌شوند) حساب کاربری — نیاز نیست اینترنت — پس از بارگذاری صفحه نیاز نیست

ایجاد کلاژ

ابزار Image Collage را در مرورگر خود باز کنید. چندین فایل تصویری را از پوشه فایل‌های خود بکشید و در ناحیه آپلود رها کنید. همچنین می‌توانید روی ناحیه آپلود کلیک کنید تا فایل‌ها را از دستگاه خود انتخاب کنید.

هر فایل باید کمتر از ۲۰ مگابایت باشد — فایل‌های بزرگتر رد می‌شوند. نوع چیدمان خود را انتخاب کنید: شبکه‌ای، آزاد یا مجله‌ای. چیدمان شبکه‌ای تصاویر را در ردیف‌ها و ستون‌های منظم مرتب می‌کند.

چیدمان آزاد به شما اجازه می‌دهد هر تصویر را به هر جای بوم بکشید. چیدمان مجله‌ای از سبک‌های ویرایشی با اندازه‌ها و موقعیت‌های ترکیبی استفاده می‌کند. رنگ پس‌زمینه را با انتخابگر رنگ تنظیم کنید.

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

برای چیدمان مجله‌ای، نسبت ابعاد بوم را تنظیم کنید. روی دکمه تولید کلیک کنید. API مربوط به OffscreenCanvas تمام تصاویر را روی یک بوم واحد ترکیب می‌کند.

libvips هر تصویر را طبق انتخاب چیدمان شما قرار می‌دهد، فاصله و حاشیه را اعمال کرده و پس‌زمینه را پر می‌کند. هیچ داده‌ای از طریق شبکه منتقل نمی‌شود. پس از تولید کلاژ، دکمه دانلود ظاهر می‌شود.

برای ذخیره کلاژ روی دستگاه خود روی آن کلیک کنید. مرورگر فایل را مستقیماً از حافظه روی دیسک می‌نویسد. پس از دانلود، libvips بافرهای حافظه موقت را به طور خودکار آزاد می‌کند.

نحوه عملکرد

ابزار Image Collage از API مربوط به OffscreenCanvas برای ترکیب چندین تصویر روی یک بوم واحد استفاده می‌کند. هنگامی که تصاویر را آپلود می‌کنید، مرورگر آن‌ها را مستقیماً در حافظه می‌خواند — هیچ آپلود سروری رخ نمی‌دهد.

libvips ابعاد بوم را بر اساس انتخاب چیدمان و تعداد تصاویر محاسبه می‌کند. برای چیدمان شبکه‌ای، بوم را به سلول‌های یکسان تقسیم می‌کند و با محاسبه ابعاد ردیف و ستون از تعداد کل تصاویر و تنظیمات ستون، اطمینان حاصل می‌کند که هر سلول سهم برابری از پیکسل‌ها را دریافت می‌کند. برای چیدمان آزاد، از یک چیدمان پیش‌فرض استفاده می‌کند که می‌توانید با کشیدن هر تصویر به هر مختصات بوم، آن را تغییر دهید.

برای چیدمان مجله‌ای، قوانین ویرایشی برای اندازه‌های ترکیبی اعمال می‌کند، جایی که تصاویر بزرگتر فضای بیشتری از بوم را دریافت کرده و تصاویر کوچکتر فضاهای خالی اطراف را پر می‌کنند.

هر تصویر با استفاده از رندر OffscreenCanvas در موقعیت محاسبه‌شده خود روی بوم ترسیم می‌شود. libvips با ایجاد شکاف‌های پیکسلی بین مرزهای سلول، فاصله بین تصاویر را اعمال می‌کند، با ترسیم مستطیل‌هایی با عرض و رنگ انتخابی شما حاشیه اضافه می‌کند و قبل از ترکیب تصاویر، پس‌زمینه را با استفاده از مقدار انتخابگر رنگ پر می‌کند.

پس از ترکیب، libvips با استفاده از متد canvas toBlob بوم را به یک تصویر PNG یا JPEG تبدیل می‌کند که داده‌های پیکسلی را به فرمت انتخابی رمزگذاری می‌کند. فایل باینری حاصل از طریق URL. createObjectURL ارائه می‌شود که یک اشاره‌گر مرجع حافظه موقت ایجاد می‌کند تا مرورگر از آن برای دانلود فایل استفاده کند.

وقتی دانلود کامل شد، libvips تابع URL. revokeObjectURL را برای آزاد کردن حافظه اختصاص‌یافته فراخوانی می‌کند.

فایل‌ها کاملاً در مرورگر شما با استفاده از OffscreenCanvas پردازش می‌شوند. آن‌ها هرگز به سرورهای ConvertCraft آپلود نمی‌شوند. فایل‌های اصلی شما در دستگاهتان باقی می‌مانند — libvips آن‌ها را در حافظه می‌خواند، کلاژ را ترکیب می‌کند و پس از دانلود، بافرهای پیکسلی را حذف می‌کند.

عیب‌یابی

برخی فایل‌ها آپلود نمی‌شوند: این فایل‌ها از محدودیت ۲۰ مگابایت فراتر رفته‌اند. OffscreenCanvas در محدودیت‌های حافظه سخت‌گیرانه عمل می‌کند. پردازش تصاویر بزرگتر از ۲۰ مگابایت به بافرهای پیکسلی فشرده‌نشده عظیمی در رم نیاز دارد که می‌تواند باعث کرش کردن تب مرورگر شود.

تصاویر مخدوش به نظر می‌رسند: چیدمان کلاژ تصاویر را برای قرارگیری در سلول‌ها مقیاس‌بندی می‌کند که می‌تواند نسبت ابعاد را تغییر دهد. از گزینه نسبت ابعاد اصلی استفاده کنید یا ابعاد سلول را متناسب با تصاویر خود تنظیم کنید.

بوم بیش از حد بزرگ است: تعداد زیاد تصاویر با وضوح بالا باعث ایجاد یک بوم بسیار بزرگ می‌شود. ممکن است حافظه مرورگر تمام شود. تعداد تصاویر را کاهش دهید یا از فایل‌های منبع با وضوح کمتر استفاده کنید.

کلاژ نامنظم به نظر می‌رسد: چیدمان‌های شبکه‌ای به تصاویری با ابعاد یکسان نیاز دارند. نسبت‌های ابعاد نامتناسب باعث ایجاد فاصله ناهموار می‌شود. قبل از آپلود، تصاویر را به ابعاد یکسان برش دهید.

### چند تصویر می‌توانم اضافه کنم؟

محدودیت عملی به حافظه در دسترس مرورگر شما بستگی دارد. libvips تصاویر را به صورت متوالی پردازش می‌کند تا محدودیت‌های حافظه را مدیریت کند. اگر با کندی یا کرش مواجه شدید، سعی کنید تعداد تصاویر را کاهش دهید.

### آیا می‌توانم موقعیت تصاویر را به صورت جداگانه تنظیم کنم؟

چیدمان‌های آزاد اجازه می‌دهند هر تصویر را به هر موقعیتی در بوم بکشید. چیدمان‌های شبکه‌ای و مجله‌ای از قوانین موقعیت‌دهی ثابت استفاده می‌کنند. برای کنترل دستی روی جای‌گذاری هر تصویر، به حالت آزاد بروید.

### فرمت فایل خروجی چیست؟

کلاژ به طور پیش‌فرض برای کیفیت بدون افت (Lossless) به صورت یک تصویر PNG ذخیره می‌شود. می‌توانید برای حجم فایل کمتر با فشرده‌سازی با افت (Lossy)، فرمت JPEG را انتخاب کنید. انتخاب فرمت قبل از دانلود در دسترس است.