ไลบรารี JavaScript โอเพ่นซอร์สสำหรับการประมวลผลภาพ
JavaScript API สำหรับ จับจานสีจากรูปภาพ
ขโมยสีคืออะไร?
Color Thief เป็นไลบรารีประมวลผลภาพน้ำหนักเบาที่เรียบง่าย ซึ่งช่วยให้นักพัฒนาซอฟต์แวร์สามารถดึงสีจากภาพโดยใช้ JavaScript เป็นไลบรารี JavaScript แท้ ๆ ที่สามารถทำงานบน Node เช่นเดียวกับในเบราว์เซอร์โดยไม่ต้องพึ่งพาภายนอก API รับสีที่โดดเด่นจากภาพ สีจะถูกส่งกลับเป็นอาร์เรย์ของจำนวนเต็มสามจำนวนที่แสดงค่าสีแดง สีเขียว และสีน้ำเงิน ขณะทำงานในเบราว์เซอร์ คุณต้องใช้ภาพ HTML สำหรับการประมวลผล และในขณะที่ใช้โหนด คุณจะต้องใช้ URL ของภาพ
แพ็คเกจ Color Thief มีไฟล์การแจกจ่ายหลายไฟล์เพื่อรองรับสภาพแวดล้อมและกระบวนการสร้างที่แตกต่างกัน color-thief.js เป็นไฟล์หลักสำหรับการประมวลผลภาพ color-thief.mjs ใช้สำหรับเบราว์เซอร์สมัยใหม่ เช่นเดียวกับ Webpack และ Rollup และ color-thief.umd.js ใช้สำหรับโหลดแท็กสคริปต์อย่างง่าย
เริ่มต้นกับโจรสี
วิธีที่แนะนำในการติดตั้ง Color Thief ผ่าน NPM โปรดใช้คำสั่งต่อไปนี้เพื่อติดตั้ง
ติดตั้ง Color Thief ผ่าน NPM
npm i --save colorthief รับสีจากภาพผ่าน JavaScript API ฟรี
ไลบรารี Color Thief แบบโอเพ่นซอร์สช่วยให้นักพัฒนา JavaScript แยกสีออกจากรูปภาพโดยทางโปรแกรม เพื่อให้ได้สีที่โดดเด่นจากรูปภาพ API จะจัดเตรียมเมธอด getColor() วิธีการได้สีที่โดดเด่นจากภาพ สีจะถูกส่งกลับเป็นอาร์เรย์ของจำนวนเต็มสามจำนวนที่แสดงค่าสีแดง สีเขียว และสีน้ำเงิน (RGB) โดยใช้โค้ดสองบรรทัดต่อไปนี้ คุณจะได้สีที่โดดเด่นจากภาพได้อย่างง่ายดาย
รับสีที่โดดเด่นจากภาพ
- โหลดรูปภาพ
- รับสี
แยกสีออกจากรูปภาพใน Node.js
const img = resolve(process.cwd(), 'rainbow.png');
ColorThief.getColor(img)
.then(color => { console.log(color) })
.catch(err => { console.log(err) })
รับจานสีจากภาพผ่าน JavaScript API ฟรี
เมื่อใช้ API คุณยังสามารถรับจานสีจากรูปภาพ เพื่อให้ได้จานสีจากรูปภาพ API จะจัดเตรียมเมธอด getPalette() วิธีการรับจานสีจากภาพโดยจัดกลุ่มสีที่คล้ายคลึงกัน จานสีจะถูกส่งกลับเป็นอาร์เรย์ที่ประกอบด้วยสี แต่ละสีเป็นอาร์เรย์ของจำนวนเต็มสามจำนวน ด้วยการใช้โค้ดสองบรรทัดต่อไปนี้ คุณสามารถรับจานสีจากรูปภาพได้อย่างง่ายดาย
รับจานสีจาก Image
- โหลดรูปภาพ
- รับจานสี
แยกภาพจานสีใน Node.js
const img = resolve(process.cwd(), 'rainbow.png');
ColorThief.getPalette(img, 5)
.then(palette => { console.log(palette) })
.catch(err => { console.log(err) })
