use image color

gunakanImageColor

Ambil palet warna dari gambar apa pun menggunakan pengait ini

Bagaimana cara kerjanya?

Ini menampilkan gambar Anda di kanvas dan kemudian menghasilkan palet warna menggunakan kuantisasi warna.

Termasuk Komponen Gambar

Komponen gambar ini merender warna placeholder saat gambar asli Anda dimuat.

Sebelum memuat gambar besar (warnai dari gambar kecil)

Setelah memuat gambar besar:

Demo Kotak Pasir Langsung:

Demo Kotak Pasir Langsung

Bagaimana cara kerja komponen gambar ini?

Anda harus memberikan src (gambar asli Anda) dan thumbnail (gambar lebih kecil). Segera setelah thumbnail dimuat, kerangkanya menjadi terlihat menggunakan warna dominannya. Sementara itu, gambar asli Anda terus dimuat, dan akhirnya, ketika gambar asli Anda tiba, kerangka tersebut menggantikannya.

Instalasi:

npm install use-image-color

Kaitnya:

Penggunaan:

 import useImageColor from 'use-image-color'

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

Parameter kait:

 useImageColor ( url : String , options : OptionsObject )

param	keterangan	bawaan
kor	Gunakan KOR. Aktifkan ini jika Anda menggunakan gambar eksternal	PALSU
warna	Jumlah warna yang harus diambil	5
format	Format keluaran: rgb atau hex	heksa
ukuran jendela	Ukuran jendela untuk mengambil piksel, nilai rendah lebih cepat	50

Komponen:

Penggunaan:

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

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

Parameter komponen:

param	keterangan	diperlukan
gambar kecil	Versi kecil dari gambar Anda	BENAR
src	Versi asli gambar Anda	BENAR
wrapperStyle	Gaya objek yang akan diterapkan pada pembungkus gambar dan warnanya	PALSU
kelas pembungkus	Kelas untuk diterapkan pada pembungkus gambar dan warnanya	PALSU