تغيير حجم الصورة

كيف يعمل

تغيير الحجم نفسه هو عملية بدائية واحدة في المتصفح: تُفكّ ترميز صورتك، ويُنشَأ <canvas> بالأبعاد المستهدفة، وتُغيّر drawImage() حجم البكسلات عليه في مرور واحد. يطبّق المتصفح مرشّح التنعيم المدمج (إعادة أخذ عينات بأسلوب ثنائي الخط) أثناء ذلك، الذي يأخذ متوسط البكسلات المجاورة بدلًا من اختيار الأقرب فقط، لذا تخرج الصور المصغَّرة ناعمة بدلًا من مسننة. تُعاد تصدير اللوحة بعدها بـ canvas.toBlob() كـ JPEG أو WebP بجودة 0.92، أو كـ PNG بدون فقدان، حسب خيار التنسيق.

بعض الحقائق العملية حول التحجيم التي يعكسها سلوك الأداة. التصغير هو حيث يتألق تغيير الحجم: أخذ متوسط بكسلات مصدر كثيرة في كل بكسل إخراج يبقي الصور حادة. التكبير لا يمكنه اختراع تفاصيل، فنفس المرشّح يوزّع البكسلات الموجودة فقط، لذا أي شيء بعد حوالي 2x يبدأ بالظهور ناعمًا؛ إذا احتجت نسخة كبيرة، ابدأ من أكبر أصل لديك. والتنعيم خاطئ في حالة واحدة بالضبط، فن البكسل، حيث تريد فعليًا حواف الجار الأقرب الحادة؛ أداة صور مثل هذه مضبوطة للصور.

يحسب وضع النسبة المئوية الأبعاد المستهدفة من الحجم الأصلي، والوضع الدقيق يأخذ أرقامك، ومفتاح قفل النسبة يبقي العرض والارتفاع مرتبطين بالنسبة الأصلية حتى لا يتمدد الأشخاص في صورك. الأبعاد محدودة بـ 20,000 بكسل لكل جانب لأن لوحة أكبر من ذلك يمكن أن تستنزف ذاكرة المتصفح. يشغّل وضع الدُفعة نفس خط أنابيب canvas على كل ملف بالتناوب ويحزم النتائج في ملف ZIP يُجمَّع أيضًا في جافاسكريبت.

بما أن خط الأنابيب بأكمله هو فك ترميز، رسم، وإعادة ترميز داخل تبويبك، فإن صورك لا تغادر جهازك أبدًا. يمكنك التحقق من هذا: افتح أدوات المطوّر، انتقل إلى لسان Network، وغيّر حجم شيء ما. لا يظهر أي طلب رفع، وتستمر الأداة في العمل دون اتصال.