1. מוצרים
  2.   תמונה
  3.   JavaScript
  4.   Color Thief
 
  

ספריית JavaScript בקוד פתוח לעיבוד תמונה

JavaScript API לקבלת לוח צבעים מתמונות.

מה זה גנב צבע?

Color Thief היא ספריית עיבוד תמונה קלה מאוד המאפשרת למפתחי תוכנה לתפוס צבע מתמונות באמצעות JavaScript. זוהי ספריית JavaScript טהורה שיכולה לעבוד על Node כמו גם בדפדפן ללא תלות חיצונית. ה-API מקבל את הצבע הדומיננטי מהתמונה. הצבע מוחזר כמערך של שלושה מספרים שלמים המייצגים ערכי אדום, ירוק וכחול. בזמן העבודה בדפדפן, עליך להשתמש בתמונת HTML לעיבוד ובזמן השימוש ב-Node עליך להשתמש בכתובת ה-URL של התמונה.

חבילת Color Thief כוללת קובצי הפצה מרובים לתמיכה בסביבות שונות ותהליכי בנייה. color-thief.js הוא הקובץ הראשי לעיבוד התמונות, color-thief.mjs משמש עבור דפדפנים מודרניים כמו גם Webpack ו-Rollup, ו-color-thief.umd.js משמש לטעינת תגי סקריפט פשוטה.

Previous Next

תחילת העבודה עם Color Thief

הדרך המומלצת להתקנת Color Thief באמצעות NPM. אנא השתמש בפקודה הבאה כדי להתקין אותו.

התקן את Color Thief באמצעות NPM

 npm i --save colorthief

קבל צבעים מתמונה באמצעות ממשק API של JavaScript בחינם

ספריית הקוד הפתוח Color Thief מאפשרת למפתחי JavaScript לחלץ צבעים מהתמונות באופן פרוגרמטי. על מנת לקבל את הצבע הדומיננטי מהתמונה, ה-API מספק את שיטת getColor()‎. השיטה מקבלת את הצבע הדומיננטי מהתמונה. הצבע מוחזר כמערך של שלושה מספרים שלמים המייצגים ערכי אדום, ירוק וכחול (RGB). על ידי שימוש בשתי שורות הקוד הבאות, תוכל לקבל בקלות את הצבע הדומיננטי מהתמונה.

קבל צבע דומיננטי מתמונה

  1. טען תמונה
  2. קבל צבע

חלץ צבע מהתמונה ב-Node.js

const img = resolve(process.cwd(), 'rainbow.png');
ColorThief.getColor(img)
.then(color => { console.log(color) })
.catch(err => { console.log(err) })

קבל את Color Platte מתמונה באמצעות API של JavaScript בחינם

באמצעות ה-API, ניתן גם לקבל פלטת צבעים מהתמונות על מנת לקבל פלטת צבעים מהתמונה, ה-API מספק את שיטת getPalette(). השיטה מקבלת פלטה מהתמונה על ידי קיבוץ צבעים דומים. הפלטה מוחזרת כמערך המכיל צבעים, כל צבע עצמו מערך של שלושה מספרים שלמים. על ידי שימוש בשתי שורות הקוד הבאות, תוכל לקבל בקלות פלטת צבע מהתמונה.

קבל צבע פלטה מתמונה

  1. טען תמונה
  2. קבל פלטת צבע

חלץ תמונת פלטת צבע ב-Node.js

const img = resolve(process.cwd(), 'rainbow.png');
ColorThief.getPalette(img, 5)
.then(palette => { console.log(palette) })
.catch(err => { console.log(err) })
 עִברִית