الصور والصور · رسزر الصورة الاجتماعية
كيف يعمل تغيير حجم صورة المتصفح: اللوحة القماشية، ورسم الصورة، وإعادة التشكيل
· كيف يعمل
تغيير حجم الصورة قماش معالجة المتصفح
يمكن للمتصفح فك تشفير الصورة ورسمها في لوحة بحجم جديد وترميز النتيجة، وكل ذلك بدون خادم. يتبع هذا المنشور هذا المسار، ويشرح أين يتم اكتساب الجودة أو فقدانها، ويوضح سبب كون الحد الوحيد للحجم هو ذاكرة جهازك.
لا يوجد تحميل، لا يوجد خادم، لا يزال يتم تغيير الحجم - السؤال الملموس هو أين يحدث العمل عندما تقوم الصفحة بتقليص صورة بحجم 20 ميجابكسل
يمكن أن تصبح الصورة 1080 بواسطة 1350 صورة شخصية دون زيارة خادم معالجة الصور. يتلقى Social Image Resizer ملفًا من منتقي المتصفح، ويتحقق من نوعه وحجمه MIME، ويستدعي createImageBitmap. تظل هذه الصورة النقطية التي تم فك تشفيرها هي المصدر لكل مخرجات محددة، لذلك يمكن لكائن محلي واحد تغذية العديد من اللوحات القماشية ذات الأشكال المختلفة.
المعاينة المرئية ليست عملية التصدير النهائية المخفية وراء طلب الشبكة. إنها عبارة عن عرض قماشي أصغر لنفس حالة الإطارات: نسبة الهدف، والتكبير/التصغير، والإزاحة، ووضع الملاءمة والخلفية. يقوم التصدير لاحقًا بتكرار ذلك العرض بأبعاد محددة مسبقًا، ويقوم بتشفير Blob ويسلم Blob إلى عناصر التحكم في التنزيل في الصفحة.
فك التشفير محلي، لكن هذه الأداة تفرض أيضًا حدًا للإدخال يبلغ 40 MB
تنص الخطة على أن ذاكرة الجهاز هي الحد العملي الوحيد، ولكن مسار الإدخال الذي يتم شحنه له حد واضح للملف 40 MB أيضًا. تم قبول JPEG وPNG وWebP؛ يتم رفض الأنواع الأخرى قبل فك التشفير. بعد تلك البوابة، يطلب createImageBitmap من المتصفح تحويل بايتات الملف المضغوط إلى وحدات بكسل للعرض والارتفاع وفك التشفير قابلة للاستخدام بواسطة اللوحة القماشية.
يمكن أن تشغل وحدات البكسل التي تم فك تشفيرها ذاكرة أكبر بكثير من الملف المضغوط، وتتطلب كل لوحة إخراج تخصيصًا خاصًا بها. ولذلك يستدعي العارض حارس ميزانية البكسل المشترك قبل إنشاء اللوحة القماشية. هذا هو القيد الثاني الموجه نحو الجهاز، وليس الإذن بالوعد بأن كل ملف أدناه 40 MB سوف يناسب كل مخرجات مطلوبة على كل جهاز.
يقوم drawImage بقياس الصورة النقطية الكاملة الموضوعة أثناء تجاوز سعة مقاطع قماش الإخراج
لا يقوم ToolAcre بحساب مستطيل اقتصاص المصدر وتمرير ثماني وسيطات للمصدر والوجهة إلى drawImage. فهو يحسب مقياسًا من أبعاد المصدر والهدف، ويضع الصورة النقطية التي تم قياسها بالكامل، ويرسمها على لوحة قماشية تقطع حوافها أي تجاوز. في وضع الغطاء، يكون هذا القص هو الاقتصاص؛ في وضع الاحتواء تظل الصورة النقطية بأكملها مرئية.
التمييز مهم لأن الاقتصاص وتغيير الحجم ليسا مترادفين. يؤدي تغيير الحجم إلى تغيير الأبعاد التي يتم عندها أخذ عينات من الصورة النقطية. يؤدي الاقتصاص إلى إزالة كل ما يقع خارج إطار الإخراج المحدود. يمكن أن يشارك استدعاء drawImage واحد في كلا التأثيرين هنا، ولكن يتم إنتاج الاقتصاص عن طريق هندسة الإطار والقص بدلاً من إعادة كتابة الملف المصدر أولاً.
إعادة التشكيل تحت الغطاء - ضبط الإعدادات، وما يطلب تلميح "الجودة العالية" من المتصفح القيام به، ولماذا تختلف النتائج قليلاً بين المتصفحات
قبل الرسم، يقوم العارض بتمكين imageSmoothingEnabled ويضبط imageSmoothingQuality على قيمة عالية. هذه عبارة عن عناصر تحكم في لوحة المتصفح، وليست طلبًا لنواة Lanczos أو bicubic أو أي نواة أخرى. لا يمكن أن يعد التنفيذ بعينات متطابقة عبر المحركات لأن API يعرض تلميحًا للجودة بدلاً من جدول المعاملات الدقيق للمتصفح.
تحافظ المقارنة المفيدة على ثبات المصدر وأبعاد المخرجات والمتصفح، ثم تفحص الحواف القطرية والخطوط الدقيقة والأنسجة المتكررة. إذا اختلف متصفح آخر قليلاً، فهذا لا يعني أن النسبة المستهدفة قد تغيرت. وهذا يعني أن نفس الطلب الهندسي تم تمريره من خلال تطبيق قماشي مختلف، وهذا هو بالضبط سبب تجنب المقالة لنسب الأداء أو الجودة المخترعة.
تشفير المخرجات - تحويل اللوحة القماشية مرة أخرى إلى ملف صورة مشفر وعرضها للتنزيل
تصبح لوحة التصدير عبارة عن كائن ثنائي كبير الحجم من خلال OffscreenCanvas.convertToBlob عند وجود هذه الطريقة، أو HTMLCanvasElement.toBlob بخلاف ذلك. يختار المستخدم JPEG، أو PNG، أو WebP. يتم توفير قيمة الجودة إلى برنامج التشفير، على الرغم من أن PNG لا يستخدم عنصر تحكم الجودة مع فقدان البيانات بالطريقة التي يستخدمها JPEG وWebP. يتم قياس عدد البايتات الناتج، وليس تقديره.
بالنسبة للعديد من الأهداف المحددة، تقوم الأداة ببناء كل كائن ثنائي كبير الحجم بالتسلسل، وتعرض أبعادها الحقيقية وحجمها المقاس، ويمكنها حزم الملفات المشفرة بالفعل في ZIP. تخزين ZIP لا يعمل على تحسين ضغط الصور هنا؛ يشير المحتوى إلى أن هذه التنسيقات مضغوطة بالفعل. تنشأ التنزيلات الفردية والأرشيف من وحدات البايت التي تم إنشاؤها محليًا.
ينفذ هذا التنفيذ عمل التصدير على الموضوع الرئيسي، وليس في عامل الويب
يشير المصنف إلى أن العمل الشاق يتم تنفيذه عادةً في Web Worker، ولكن هذا التطبيق يستورد وظائف الاقتصاص والعرض مباشرةً إلى main.js ويمر عبر الأهداف هناك. لم يتم إنشاء أي عامل في المسار الذي تم فحصه. لا يزال من الممكن أن تظل الصفحة قابلة للاستخدام في المهام العادية، ولكن يجب ملاحظة الاستجابة بدلاً من نسبتها إلى بنية غير موجودة.
يتم دعم عزل الشبكة بنوعين من الأدلة. تقوم الاختبارات الأساسية بتثبيت حارس الشبكة وتأطير كل إعداد مسبق دون أي محاولة، بينما يشير سجل المنتج إلى المعالجة المحلية. يمكن لفحص لوحة الشبكة في وقت التشغيل إضافة دليل النشر. يجب أن يميز تحميل الصور عن أصول الصفحة العادية أو التحليلات التي تم الكشف عنها بدلاً من الادعاء بأن الصفحة بأكملها لا تقدم أي طلبات.
ما لا يغطيه هذا — GPU-مكتبات تغيير الحجم المتسارعة وخطوط أنابيب الصور من جانب الخادم
تم بناء هذا المسار عمدًا على أساسيات المتصفح بدلاً من مكتبة GPU أو خط أنابيب الوسائط البعيد. ولا يعرض نواة قابلة للتحديد لإعادة التشكيل، أو خوارزميات بديلة معيارية، أو يعد بمعالجة دفعية سريعة. صورة مصدر واحدة تنتج عدة محاصيل؛ تنتمي العديد من ملفات المصدر غير ذات الصلة إلى سير عمل مختلف.
هذه الاستثناءات تجعل الوعد قابلاً للاختبار. يثبت الكود التحقق من صحة الملف، وفك تشفير الصور النقطية، والتأطير الحسابي، ورسم القماش، وترميز Blob، وتجميع التنزيل. ولا يثبت كيفية تغيير حجم مجموعة الخوادم لنفس وحدات البكسل أو المسار GPU الذي قد يختاره المتصفح داخليًا. تتوقف المطالبات عند واجهات برمجة تطبيقات الويب المستخدمة.
الخلاصة: يحتوي متصفحك بالفعل على أداة تغيير حجم مدمجة - حيث يقوم Social Image Resizer بتشغيلها نيابةً عنك، حيث يقوم بالاقتصاص والقياس إلى نسبة العرض إلى الارتفاع للنظام الأساسي دون تحميل الملف
يوفر المتصفح بالفعل العمليات الأساسية، ولكن النتائج المفيدة تعتمد على الهندسة الصحيحة المحيطة بها. يختار Social Image Resizer الحجم الأقصى للتغطية، والحجم الأدنى للاحتواء، وضبط الحركة، ومعاينة إرشادات المنطقة الآمنة بشكل منفصل، والتصدير بأبعاد مستهدفة دقيقة. يحول هذا التنسيق رسمًا منخفض المستوى API إلى سير عمل أصول اجتماعية قابل للتكرار.
اختبر خط الأنابيب بصورة أصلية بدلاً من نسخة تم تقليصها مسبقًا. اختر إعدادًا مسبقًا أو نسبة مخصصة للأداة الحالية، وانقل الموضوع، وقم بالتصدير مرة واحدة، وافحص الأبعاد التي تم تنزيلها. الدليل هو الملف المحلي الذي تتلقاه ومسار التعليمات البرمجية الذي أنشأه، وليس ادعاء بأن كل متصفح يستخدم أداة إعادة تشكيل مخفية متطابقة.