use image color

useImageColor

احصل على لوحة الألوان من أي صورة باستخدام هذا الخطاف

كيف يعمل؟

فهو يعرض صورتك على لوحة قماشية ثم يقوم بإنشاء لوحة الألوان الخاصة بها باستخدام تكميم الألوان.

يتضمن مكون الصورة

يعرض مكون الصورة هذا لونًا نائبًا أثناء تحميل صورك الأصلية.

قبل تحميل الصور الكبيرة (اللون من الصور الصغيرة)

بعد تحميل الصور الكبيرة:

العرض التوضيحي المباشر لبرنامج Sandbox:

عرض تجريبي لصندوق الرمل المباشر

كيف يعمل مكون الصورة هذا؟

يجب عليك تقديم src (صورتك الأصلية) وصورة مصغرة (صورة أصغر). بمجرد تحميل الصورة المصغرة، يصبح الهيكل العظمي مرئيًا باستخدام لونه السائد. في هذه الأثناء، تستمر صورتك الأصلية في التحميل، وأخيرًا، عندما تصل صورتك الأصلية، فإنها تحل محل الهيكل العظمي.

تثبيت:

npm install use-image-color

الخطاف:

الاستخدام:

 import useImageColor from 'use-image-color'

export function Card ( ) {
  const { colors } = useImageColor ( url , { cors : true , colors : 5 } )
  return ( ... ) ;
} 

معلمات الخطاف:

 useImageColor ( url : String , options : OptionsObject )

المعلمة	وصف	تقصير
كورس	استخدم كورس. قم بتمكين هذا إذا كنت تستخدم صورًا خارجية	خطأ شنيع
الألوان	عدد الألوان للاستيلاء عليها	5
شكل	تنسيق الإخراج: rgb أو عرافة	عرافة
windowSize	حجم النافذة لالتقاط وحدات البكسل، والقيم المنخفضة أسرع	50

المكون:

الاستخدام:

 import { Image } from 'use-image-color'

export function Card ( ) {
  return (
    < Image src = { url } thumbnail = { thumbnail } / >
  ) ;
} 

معلمات المكون:

المعلمة	وصف	مطلوب
صورة مصغرة	نسخة صغيرة من صورتك	حقيقي
src	النسخة الأصلية من صورتك	حقيقي
WrapperStyle	كائن النمط الذي سيتم تطبيقه على غلاف الصورة واللون	خطأ شنيع
WrapperClass	فئة لتطبيقها على غلاف الصورة واللون	خطأ شنيع