مستخلص لوحة ألوان الصور
ارفع صورة وتستخرج هذه الأداة ألوانها السائدة تلقائيًا، باستخدام تكميم الألوان (color quantization) القائم على المدرج التكراري (histogram) — لوحة ألوان جاهزة بأكواد Hex، تُحسب بالكامل داخل متصفحك، دون رفع أي شيء إلى خادم.
253 مشاهدة
ارفع صورة لاستخراج ألوانها السائدة — كل شيء يعمل داخل متصفحك.
لماذا لا يمكنك ببساطة عدّ البكسلات
الطريقة الواضحة لإيجاد الألوان السائدة في صورة تبدو بسيطة: عدّ عدد البكسلات التي تحمل كل لون بدقة، والاحتفاظ بالألوان الأكثر ظهورًا. عمليًا، يفشل هذا النهج على الفور تقريبًا. فصورة رقمية لسماء زرقاء، مثلًا، ليست لونًا أزرق واحدًا مسطحًا — بل آلاف الأزرقات المختلفة قليلًا، تتغيّر بكسلًا بكسل بسبب ضوضاء المستشعر (sensor noise) وتدرجات الضوء الطبيعي وتشوهات ضغط JPEG. قد يكون بكسلان متجاوران في السماء rgb(91, 148, 214) وrgb(92, 149, 213): متطابقان بصريًا، مختلفان رقميًا. عند عدّهما كقيم دقيقة، لا يُعدّ أيٌّ منهما "اللون الأكثر شيوعًا" — فقد يظهر كل منهما مرة أو مرتين فقط، مدفونًا وسط آلاف الأزرقات الأخرى شبه المتطابقة لكنها مختلفة تقنيًا. النهج الساذج يُعيد ضوضاء، لا لوحة ألوان.
الحل هو التوقف عن عدّ قيم البكسل الدقيقة والبدء بعدّ دلاء (buckets) من الألوان المتشابهة. تقسّم هذه الأداة كل قناة من قنوات الأحمر والأخضر والأزرق — التي تتراوح عادة من 0 إلى 255 — إلى 8 نطاقات متساوية من 32 قيمة، باستخدام Math.floor(value / 32) * 32 على كل قناة. هذا يحوّل 16.7 مليون تركيبة RGB محتملة إلى شبكة يمكن التعامل معها من 8 × 8 × 8 = 512 دلوًا. يقع كل بكسل في الصورة المُعاد ضبط حجمها في دلو واحد بالضبط بناءً على النطاق الذي تقع فيه قيم الأحمر والأخضر والأزرق الخاصة به، ويُحفَظ عدّاد جارٍ — باستخدام كائن بسيط كخريطة تجزئة (hash map) — لعدد البكسلات التي تقع في كل دلو، بالإضافة إلى مجموع جارٍ لقيمها الفعلية للأحمر والأخضر والأزرق.
من الدلاء إلى لوحة الألوان
بعد عدّ كل بكسل، تُرتَّب الدلاء حسب عدد سكانها، ويُحتفَظ بأكثر 6 إلى 8 دلاء اكتظاظًا. لكن اللون المعروض لكل دلو ليس ببساطة الحد الرقمي للدلو (مثلًا "224-255 أحمر، 128-159 أخضر، 0-31 أزرق") — فهذا سيكون مجرد زاوية عشوائية إلى حدٍّ ما من مكعب 32×32×32. بدلًا من ذلك، تحسب هذه الأداة المتوسط الحقيقي للأحمر والأخضر والأزرق لكل بكسل وقع فعليًا داخل ذلك الدلو، وهو أقرب بكثير إلى ما تدركه العين كاللون الممثِّل لتلك المنطقة من الصورة.
يُعدّ نهج تجميع المدرج التكراري (histogram binning) هذا شكلًا بسيطًا عن قصد من تكميم الألوان (color quantization) — تقليص مجموعة كبيرة من الألوان إلى مجموعة صغيرة وممثِّلة. بديل كلاسيكي أكثر تطورًا هو القطع الوسيطي (median-cut)، الذي عرّفه بول هيكبرت (Paul Heckbert) في رسالة الماجستير التي قدّمها عام 1980 في معهد MIT، والذي يُقسِّم فضاء الألوان تكراريًا على طول أوسع أبعاده بدلًا من استخدام صناديق ثابتة الحجم؛ وهو لا يزال التقنية الكامنة وراء تقليص صور GIF إلى لوحة من 256 لونًا. ينتج القطع الوسيطي عمومًا لوحات ألوان أدق إدراكيًا للصور المعقدة، على حساب تعقيد أكبر في التنفيذ. أما تجميع المدرج التكراري بشبكة ثابتة، المستخدَم هنا، فهو أبسط في الفهم وسريع بما يكفي للعمل فورًا داخل المتصفح — وهذه هي المقايضة التي تعتمدها هذه الأداة.
قبل أن يبدأ أي عدّ، تُصغَّر الصورة المرفوعة أولًا بحيث لا يتجاوز عرضها 200 بكسل، باستخدام واجهة برمجة Canvas في HTML5. يقلِّل هذا بشكل كبير عدد البكسلات التي يجب قراءتها وتصنيفها في دلاء، ولا يكاد يؤثر على لوحة الألوان الناتجة، لأن دلاء الألوان تتتبع مناطق واسعة من درجة اللون، لا التفاصيل الدقيقة. تحدث العملية بأكملها — رسم الصورة، تصغيرها، قراءة بيانات البكسل باستخدام getImageData()، وحساب متوسطات الدلاء — محليًا في ذاكرة المتصفح. لا تُرفع الصورة أبدًا إلى أي خادم.
الأسئلة الشائعة
لماذا لا تبحث هذه الأداة ببساطة عن اللون الأكثر شيوعًا الوحيد؟
لأنه في الصور الفوتوغرافية الحقيقية، لا يكاد أي بكسلين يتشاركان نفس قيمة RGB بالضبط — الضوء الطبيعي وضوضاء المستشعر والضغط تجعل الألوان التي تبدو متطابقة للعين مختلفة قليلًا رقميًا، لذا لا تتكرر أي قيمة دقيقة بما يكفي لتكون ذات معنى. تجميع الألوان المتقاربة في دلاء أولًا هو ما يجعل العدّ مجديًا.
كم لونًا تعرض لوحة الألوان؟
حتى 8 ألوان — تجمّع الأداة كل البكسلات في 512 دلوًا محتملًا للألوان (8 مستويات لكل من الأحمر والأخضر والأزرق)، ثم تعرض من 6 إلى 8 دلاء تحتوي على أكبر عدد من البكسلات. قد تُعيد صورة بسيطة جدًا ومسطحة في الغالب عددًا أقل إذا كانت بضعة دلاء فقط ممتلئة أصلًا.
هل هذه هي نفس التقنية المستخدَمة في إنشاء صور GIF؟
ليست تمامًا، رغم أنها تقنية قريبة منها. تُقلَّص صور GIF عادة إلى 256 لونًا باستخدام القطع الوسيطي، وهو خوارزمية تكميم أكثر تطورًا من عام 1980 تُقسِّم فضاء الألوان تكراريًا بدلًا من استخدام شبكة ثابتة. تستخدم هذه الأداة تجميع مدرج تكراري أبسط بحجم ثابت، وهو أسرع في الحساب وأسهل في الفهم، على حساب بعض الدقة الإدراكية في الصور المعقدة.
هل رفع صورة هنا يُرسلها إلى خادم؟
لا — تُفكّ ترميز الصورة وتُرسم على عنصر canvas بالكامل داخل متصفحك، وتُقرأ كل بكسل وتُحلَّل محليًا باستخدام واجهة getImageData() الخاصة بـcanvas. لا يُنقَل أي شيء متعلق بالصورة إلى أي مكان أبدًا.
لماذا تُصغَّر الصورة قبل تحليلها؟
لأسباب تتعلق بالسرعة فقط. قراءة وتصنيف كل بكسل في صورة بدقة كاملة قد يعني معالجة عشرات الملايين من القيم؛ تصغير الصورة أولًا إلى عرض أقصى 200 بكسل يقلّل ذلك بشكل كبير بينما لا يكاد يغيّر النتيجة، لأن الألوان السائدة هي مناطق واسعة، لا تفاصيل دقيقة.
أدوات مشابهة
الإبلاغ عن مشكلة
مستخلص لوحة ألوان الصور
التعليقات
لا توجد تعليقات بعد — كن أول من يكتب تعليقًا!