thif.png

画像をドロップして画像の主要なカラーをピックアップできると便利。

color-thiefという優れたスクリプトがある。
http://lokeshdhakar.com/projects/color-thief/

p=(new ColorThief()).getPalette(el,5) //[[71, 45, 105],[200, 85, 117],[25, 8, 27],....]
<script src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.0.1/color-thief.min.js"></script>
<img src...></img>
//usage
let fn={}
fn.q=(s,doc=document)=>{return doc.querySelector(s)}
fn.toColor=(d)=>{return '#'+d.map(d=> ('00'+d.toString(16)).slice(-2) ).join('')}
;
let el=fn.q('img') //image need the loaded and over the cross domain.
,p=(new ColorThief()).getPalette(el,5) //[[71, 45, 105],[200, 85, 117],[25, 8, 27],....]
,hex=p.map(d=>fn.toColor(d))
;
console.log(p,hex)

demo

https://s.codepen.io/gnjo/debug/EEvmYR/DqADdEyGBwKA
50件までは縮小画像をlocalStorageに保存する。それ以降は古いものを削除。表示上の制限はなし。

追記

クロスドメインはブラウザが行っている場合が多い。chromeは--disable-web-security オプションで解除できる

//cmd.exe
start "" "C:\Users\gnjo\AppData\Local\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.