Tidak yakin ini mungkin, tetapi ingin menulis skrip yang akan mengembalikan rata-rata hex
atau rgb
nilai untuk sebuah gambar. Saya tahu ini bisa dilakukan dalam AS tetapi ingin melakukannya dalam JavaScript.
javascript
image-manipulation
bgreater
sumber
sumber
Jawaban:
AFAIK, satu-satunya cara untuk melakukan ini adalah dengan
<canvas/>
...DEMO V2 : http://jsfiddle.net/xLF38/818/
Perhatikan, ini hanya akan bekerja dengan gambar di domain yang sama dan di browser yang mendukung kanvas HTML5:
Untuk IE, lihat excanvas .
sumber
'rgb('+rgb.r+','+rgb.b+','+rgb.g+')'
dan seharusnya begitu'rgb('+rgb.r+','+rgb.g+','+rgb.b+')'
. aneh kalau warna dominannya biru tapi hasilnya hijau :).img.crossOrigin = '';
sebelum menyetelsrc
atribut. Ditemukan di: coderwall.com/p/pa-2uwcount === length / 4 / blockSize
;)Saya pikir saya akan memposting proyek yang baru-baru ini saya temukan untuk mendapatkan warna dominan:
Pencuri Warna
Solusi lain yang menyebutkan dan menyarankan warna dominan tidak pernah benar-benar menjawab pertanyaan dalam konteks yang tepat ("dalam javascript"). Semoga proyek ini akan membantu mereka yang ingin melakukan hal itu.
sumber
"Warna Dominan" itu rumit. Yang ingin Anda lakukan adalah membandingkan jarak antara setiap piksel dan setiap piksel lainnya dalam ruang warna (Jarak Euclidean), lalu temukan piksel yang warnanya paling dekat dengan setiap warna lainnya. Pixel itu adalah warna dominan. Warna rata-rata biasanya lumpur.
Saya berharap saya memiliki MathML di sini untuk menunjukkan Jarak Euclidean. Google itu.
Saya telah menyelesaikan eksekusi di atas dalam ruang warna RGB menggunakan PHP / GD di sini: https://gist.github.com/cf23f8bddb307ad4abd8
Namun ini sangat mahal secara komputasi. Ini akan merusak sistem Anda pada gambar besar, dan pasti akan merusak browser Anda jika Anda mencobanya di klien. Saya telah mengerjakan pemfaktoran ulang eksekusi saya untuk: - menyimpan hasil dalam tabel pencarian untuk digunakan di masa mendatang dalam iterasi pada setiap piksel. - untuk membagi gambar besar menjadi kotak 20px 20px untuk dominasi lokal. - untuk menggunakan jarak euclidean antara x1y1 dan x1y2 untuk mengetahui jarak antara x1y1 dan x1y3.
Tolong beri tahu saya jika Anda membuat kemajuan di bidang ini. Saya akan senang melihatnya. Aku akan melakukan hal yang sama.
Kanvas jelas merupakan cara terbaik untuk melakukan ini di klien. SVG tidak, SVG berbasis vektor. Setelah saya menyelesaikan eksekusi, hal berikutnya yang ingin saya lakukan adalah menjalankan ini di kanvas (mungkin dengan webworker untuk perhitungan jarak keseluruhan setiap piksel).
Hal lain yang perlu dipikirkan adalah bahwa RGB bukanlah ruang warna yang baik untuk melakukan hal ini, karena jarak euclidean antar warna dalam ruang RGB tidak terlalu dekat dengan jarak visual. Ruang warna yang lebih baik untuk melakukan ini mungkin LUV, tetapi saya belum menemukan perpustakaan yang baik untuk ini, atau algorythims untuk mengubah RGB ke LUV.
Pendekatan yang sepenuhnya berbeda adalah dengan mengurutkan warna Anda dalam pelangi, dan membangun histogram dengan toleransi untuk memperhitungkan berbagai corak warna. Saya belum mencobanya, karena menyortir warna dalam pelangi itu sulit, begitu pula histogram warna. Saya mungkin akan mencoba ini selanjutnya. Sekali lagi, beri tahu saya jika Anda membuat kemajuan di sini.
sumber
Pertama: dapat dilakukan tanpa HTML5 Canvas atau SVG.
Sebenarnya, seseorang baru saja berhasil membuat file PNG sisi klien menggunakan JavaScript , tanpa kanvas atau SVG, menggunakan skema URI data .
Kedua: Anda mungkin sebenarnya tidak membutuhkan Canvas, SVG, atau yang di atas sama sekali.
Jika Anda hanya perlu memproses gambar di sisi klien, tanpa mengubahnya, semua ini tidak diperlukan.
Anda bisa mendapatkan alamat sumber dari tag img di halaman, membuat permintaan XHR untuk itu - kemungkinan besar akan datang dari cache browser - dan memprosesnya sebagai aliran byte dari Javascript.
Anda akan membutuhkan pemahaman yang baik tentang format gambar. (Generator di atas sebagian didasarkan pada sumber libpng dan mungkin memberikan titik awal yang baik.)
sumber
Saya akan mengatakan melalui tag kanvas HTML.
Anda dapat menemukan di sini posting oleh @Georg berbicara tentang kode kecil oleh pengembang Opera:
Ini membalikkan gambar dengan menggunakan nilai R, G dan B dari setiap piksel. Anda dapat dengan mudah menyimpan nilai RGB, lalu mengumpulkan array Merah, Hijau dan Biru, dan akhirnya mengubahnya kembali menjadi kode HEX.
sumber
Saya baru-baru ini menemukan plugin jQuery yang melakukan apa yang awalnya saya inginkan https://github.com/briangonzalez/jquery.adaptive-backgrounds.js dalam hal mendapatkan warna dominan dari gambar.
sumber
Javascript tidak memiliki akses ke data warna piksel individu gambar. Setidaknya, mungkin tidak sampai html5 ... pada saat itu masuk akal bahwa Anda akan dapat menggambar gambar ke kanvas, dan kemudian memeriksa kanvas (mungkin, saya belum pernah melakukannya sendiri).
sumber
Solusi All-In-One
Saya pribadi akan menggabungkan Color Thief bersama dengan versi Modifikasi Nama itu Warna untuk mendapatkan rangkaian hasil warna dominan yang lebih dari cukup untuk gambar.
Contoh:
Perhatikan gambar berikut:
Anda dapat menggunakan kode berikut untuk mengekstrak data gambar yang berkaitan dengan warna dominan:
sumber
Ini tentang "Kuantisasi Warna" yang memiliki beberapa pendekatan seperti MMCQ (Kuantisasi Pemotongan Median yang Dimodifikasi) atau OQ (Kuantisasi Oktree). Pendekatan yang berbeda menggunakan K-Means untuk mendapatkan kelompok warna.
Saya telah menggabungkan semuanya di sini, karena saya menemukan solusi untuk di
tvOS
mana terdapat subset XHTML, yang tidak memiliki<canvas/>
elemen:Hasilkan Warna Dominan untuk gambar RGB dengan XMLHttpRequest
sumber
Cara yang kurang akurat tapi tercepat untuk mendapatkan warna gambar rata-rata dengan
datauri
dukungan:sumber
Seperti yang dikemukakan dalam jawaban lain, seringkali yang sebenarnya Anda inginkan adalah warna dominan dibandingkan dengan warna rata-rata yang cenderung cokelat. Saya menulis skrip yang mendapatkan warna paling umum dan mempostingnya di inti ini
sumber
Ada alat online pickimagecolor.com yang membantu Anda menemukan rata-rata atau warna dominan gambar. Anda hanya perlu mengupload gambar dari komputer, lalu mengklik gambar. Ini memberikan warna rata-rata dalam HEX, RGB dan HSV. Ia juga menemukan corak warna yang cocok dengan warna itu untuk dipilih. Saya telah menggunakannya beberapa kali.
sumber