use image color

ใช้ImageColor

หยิบชุดสีจากรูปภาพใดก็ได้โดยใช้ฮุกนี้

มันทำงานอย่างไร?

มันแสดงภาพของคุณบนผืนผ้าใบ จากนั้นสร้างจานสีโดยใช้การวัดปริมาณสี

รวมถึงองค์ประกอบภาพ

ส่วนประกอบรูปภาพนี้จะแสดงสีตัวยึดตำแหน่งในขณะที่รูปภาพต้นฉบับของคุณกำลังโหลด

ก่อนโหลดภาพใหญ่ (สีจากภาพเล็ก)

หลังจากโหลดภาพขนาดใหญ่:

การสาธิต Sandbox แบบสด:

การสาธิต 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 )

พารามิเตอร์	คำอธิบาย	ค่าเริ่มต้น
คอร์	ใช้ CORS เปิดใช้งานสิ่งนี้หากคุณใช้รูปภาพภายนอก	เท็จ
สี	จำนวนสีที่ต้องการคว้า	5
รูปแบบ	รูปแบบเอาต์พุต: RGB หรือ Hex	ฐานสิบหก
ขนาดหน้าต่าง	ขนาดของหน้าต่างที่จะจับพิกเซล ค่าต่ำจะเร็วขึ้น	50

ส่วนประกอบ:

การใช้งาน:

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

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

พารามิเตอร์ส่วนประกอบ:

พารามิเตอร์	คำอธิบาย	ที่จำเป็น
ภาพขนาดย่อ	รูปภาพของคุณเวอร์ชันขนาดเล็ก	จริง
src	รูปภาพต้นฉบับของคุณ	จริง
wrapperStyle	จัดรูปแบบวัตถุเพื่อใช้กับกระดาษห่อรูปภาพและสี	เท็จ
กระดาษห่อClass	คลาสที่ใช้กับ wrapper ของรูปภาพและสี	เท็จ