├── .nvmrc ├── VERSION ├── _redirects ├── public ├── robots.txt ├── paint.png ├── favicon.ico ├── img │ ├── bianco.png │ └── icons │ │ ├── favicon.ico │ │ ├── apple-icon.png │ │ ├── favicon-16x16.png │ │ ├── favicon-32x32.png │ │ ├── favicon-96x96.png │ │ ├── ms-icon-70x70.png │ │ ├── mstile-150x150.png │ │ ├── apple-icon-57x57.png │ │ ├── apple-icon-60x60.png │ │ ├── apple-icon-72x72.png │ │ ├── apple-icon-76x76.png │ │ ├── apple-touch-icon.png │ │ ├── ms-icon-144x144.png │ │ ├── ms-icon-150x150.png │ │ ├── ms-icon-310x310.png │ │ ├── android-icon-36x36.png │ │ ├── android-icon-48x48.png │ │ ├── android-icon-72x72.png │ │ ├── android-icon-96x96.png │ │ ├── apple-icon-114x114.png │ │ ├── apple-icon-120x120.png │ │ ├── apple-icon-144x144.png │ │ ├── apple-icon-152x152.png │ │ ├── apple-icon-180x180.png │ │ ├── android-icon-144x144.png │ │ ├── android-icon-192x192.png │ │ ├── android-chrome-192x192.png │ │ ├── android-chrome-512x512.png │ │ ├── apple-icon-precomposed.png │ │ ├── apple-touch-icon-120x120.png │ │ ├── apple-touch-icon-152x152.png │ │ ├── apple-touch-icon-180x180.png │ │ ├── apple-touch-icon-60x60.png │ │ ├── apple-touch-icon-76x76.png │ │ ├── msapplication-icon-144x144.png │ │ ├── android-chrome-maskable-192x192.png │ │ ├── android-chrome-maskable-512x512.png │ │ ├── browserconfig.xml │ │ ├── manifest.json │ │ └── safari-pinned-tab.svg └── index.html ├── .browserslistrc ├── jest.config.js ├── colors_data ├── apple.json ├── earth.json ├── happy.json ├── leaf.json ├── night.json ├── persona.json ├── afternoon.json ├── delivery.json ├── instagram.json ├── summer.json ├── content.json ├── sky.json ├── beautiful.json ├── facebook.json ├── gentle.json ├── coffee.json ├── gaming.json ├── spring.json ├── morning.json ├── car.json ├── travel.json ├── twitter.json ├── evening.json ├── winter.json ├── love.json ├── autumn.json └── README.md ├── src ├── assets │ ├── logo.png │ ├── css │ │ └── tailwind.css │ └── github.svg ├── modules │ ├── CreateWebWorker.js │ ├── ClusterFvck.js │ └── QuantityImageData.js ├── helper │ ├── FileReader.js │ └── CommonHelper.js ├── router │ └── index.js ├── main.js ├── components │ ├── ImgDisplay.vue │ ├── Notifier.vue │ ├── palette.vue │ ├── Copy.vue │ ├── Footer.vue │ ├── Navbar.vue │ ├── palettes.vue │ ├── Colors.vue │ ├── ColorsRecomendation.vue │ └── PictureLoader.vue ├── registerServiceWorker.js ├── views │ └── Home.vue ├── store │ └── index.js └── App.vue ├── screen_capture └── ss.png ├── babel.config.js ├── .editorconfig ├── jsconfig.json ├── postcss.config.js ├── vue.config.js ├── .gitignore ├── tests └── unit │ └── example.spec.js ├── tailwind.config.js ├── .eslintrc.js ├── LICENSE ├── README.md ├── package.json └── CONTRIBUTING.md /.nvmrc: -------------------------------------------------------------------------------- 1 | 10.23.3 -------------------------------------------------------------------------------- /VERSION: -------------------------------------------------------------------------------- 1 | 1.1.0 -------------------------------------------------------------------------------- /_redirects: -------------------------------------------------------------------------------- 1 | /* /index.html 200 -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Disallow: 3 | -------------------------------------------------------------------------------- /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not dead 4 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: '@vue/cli-plugin-unit-jest', 3 | }; 4 | -------------------------------------------------------------------------------- /colors_data/apple.json: -------------------------------------------------------------------------------- 1 | [ 2 | ["#e4aca9ff","#c43232ff","#bb1516ff","#ab1213ff","#ab1314ff"] 3 | ] -------------------------------------------------------------------------------- /public/paint.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbaladinur/color-extractor/HEAD/public/paint.png -------------------------------------------------------------------------------- /colors_data/earth.json: -------------------------------------------------------------------------------- 1 | [ 2 | ["#4784c5ff", "#0066adff", "#005b94ff", "#96c835ff", "#84bd3aff"] 3 | ] -------------------------------------------------------------------------------- /colors_data/happy.json: -------------------------------------------------------------------------------- 1 | [ 2 | ["#ffe66fff", "#ffe665ff", "#ffe45fff", "#ffe463ff", "#ffe461ff"] 3 | ] -------------------------------------------------------------------------------- /colors_data/leaf.json: -------------------------------------------------------------------------------- 1 | [ 2 | ["#bffb32ff", "#b7f738ff", "#9de748ff", "#8cdc52ff", "#5dc378ff"] 3 | ] -------------------------------------------------------------------------------- /colors_data/night.json: -------------------------------------------------------------------------------- 1 | [ 2 | ["#24403aff", "#3e655eff", "#123d3aff", "#154644ff", "#113330ff"] 3 | ] -------------------------------------------------------------------------------- /colors_data/persona.json: -------------------------------------------------------------------------------- 1 | [ 2 | ["#111344ff", "#4747a1ff", "#92c9ffff", "#78b1ffff", "#99d1feff"] 3 | ] -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbaladinur/color-extractor/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbaladinur/color-extractor/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /colors_data/afternoon.json: -------------------------------------------------------------------------------- 1 | [ 2 | ["#4a5c84ff", "#243b69ff", "#e7e9eaff", "#a2a5b1ff", "#a7bddeff"] 3 | ] -------------------------------------------------------------------------------- /colors_data/delivery.json: -------------------------------------------------------------------------------- 1 | [ 2 | ["#fdf2e1ff", "#e30141ff", "#e20241ff", "#b01534ff", "#b11534ff"] 3 | ] -------------------------------------------------------------------------------- /colors_data/instagram.json: -------------------------------------------------------------------------------- 1 | [ 2 | ["#ff6b42ff", "#ff8b47ff", "#ea4968ff", "#df437dff", "#d43d92ff"] 3 | ] -------------------------------------------------------------------------------- /colors_data/summer.json: -------------------------------------------------------------------------------- 1 | [ 2 | ["#b5c1cfff", "#c3d0e0ff", "#c9d6e6ff", "#cad7e7ff", "#fcfbfaff"] 3 | ] -------------------------------------------------------------------------------- /public/img/bianco.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbaladinur/color-extractor/HEAD/public/img/bianco.png -------------------------------------------------------------------------------- /screen_capture/ss.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbaladinur/color-extractor/HEAD/screen_capture/ss.png -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset', 4 | ], 5 | }; 6 | -------------------------------------------------------------------------------- /public/img/icons/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbaladinur/color-extractor/HEAD/public/img/icons/favicon.ico -------------------------------------------------------------------------------- /public/img/icons/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbaladinur/color-extractor/HEAD/public/img/icons/apple-icon.png -------------------------------------------------------------------------------- /public/img/icons/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbaladinur/color-extractor/HEAD/public/img/icons/favicon-16x16.png -------------------------------------------------------------------------------- /public/img/icons/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbaladinur/color-extractor/HEAD/public/img/icons/favicon-32x32.png -------------------------------------------------------------------------------- /public/img/icons/favicon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbaladinur/color-extractor/HEAD/public/img/icons/favicon-96x96.png -------------------------------------------------------------------------------- /public/img/icons/ms-icon-70x70.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbaladinur/color-extractor/HEAD/public/img/icons/ms-icon-70x70.png -------------------------------------------------------------------------------- /public/img/icons/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbaladinur/color-extractor/HEAD/public/img/icons/mstile-150x150.png -------------------------------------------------------------------------------- /public/img/icons/apple-icon-57x57.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbaladinur/color-extractor/HEAD/public/img/icons/apple-icon-57x57.png -------------------------------------------------------------------------------- /public/img/icons/apple-icon-60x60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbaladinur/color-extractor/HEAD/public/img/icons/apple-icon-60x60.png -------------------------------------------------------------------------------- /public/img/icons/apple-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbaladinur/color-extractor/HEAD/public/img/icons/apple-icon-72x72.png -------------------------------------------------------------------------------- /public/img/icons/apple-icon-76x76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbaladinur/color-extractor/HEAD/public/img/icons/apple-icon-76x76.png -------------------------------------------------------------------------------- /public/img/icons/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbaladinur/color-extractor/HEAD/public/img/icons/apple-touch-icon.png -------------------------------------------------------------------------------- /public/img/icons/ms-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbaladinur/color-extractor/HEAD/public/img/icons/ms-icon-144x144.png -------------------------------------------------------------------------------- /public/img/icons/ms-icon-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbaladinur/color-extractor/HEAD/public/img/icons/ms-icon-150x150.png -------------------------------------------------------------------------------- /public/img/icons/ms-icon-310x310.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbaladinur/color-extractor/HEAD/public/img/icons/ms-icon-310x310.png -------------------------------------------------------------------------------- /public/img/icons/android-icon-36x36.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbaladinur/color-extractor/HEAD/public/img/icons/android-icon-36x36.png -------------------------------------------------------------------------------- /public/img/icons/android-icon-48x48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbaladinur/color-extractor/HEAD/public/img/icons/android-icon-48x48.png -------------------------------------------------------------------------------- /public/img/icons/android-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbaladinur/color-extractor/HEAD/public/img/icons/android-icon-72x72.png -------------------------------------------------------------------------------- /public/img/icons/android-icon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbaladinur/color-extractor/HEAD/public/img/icons/android-icon-96x96.png -------------------------------------------------------------------------------- /public/img/icons/apple-icon-114x114.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbaladinur/color-extractor/HEAD/public/img/icons/apple-icon-114x114.png -------------------------------------------------------------------------------- /public/img/icons/apple-icon-120x120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbaladinur/color-extractor/HEAD/public/img/icons/apple-icon-120x120.png -------------------------------------------------------------------------------- /public/img/icons/apple-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbaladinur/color-extractor/HEAD/public/img/icons/apple-icon-144x144.png -------------------------------------------------------------------------------- /public/img/icons/apple-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbaladinur/color-extractor/HEAD/public/img/icons/apple-icon-152x152.png -------------------------------------------------------------------------------- /public/img/icons/apple-icon-180x180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbaladinur/color-extractor/HEAD/public/img/icons/apple-icon-180x180.png -------------------------------------------------------------------------------- /public/img/icons/android-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbaladinur/color-extractor/HEAD/public/img/icons/android-icon-144x144.png -------------------------------------------------------------------------------- /public/img/icons/android-icon-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbaladinur/color-extractor/HEAD/public/img/icons/android-icon-192x192.png -------------------------------------------------------------------------------- /public/img/icons/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbaladinur/color-extractor/HEAD/public/img/icons/android-chrome-192x192.png -------------------------------------------------------------------------------- /public/img/icons/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbaladinur/color-extractor/HEAD/public/img/icons/android-chrome-512x512.png -------------------------------------------------------------------------------- /public/img/icons/apple-icon-precomposed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbaladinur/color-extractor/HEAD/public/img/icons/apple-icon-precomposed.png -------------------------------------------------------------------------------- /public/img/icons/apple-touch-icon-120x120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbaladinur/color-extractor/HEAD/public/img/icons/apple-touch-icon-120x120.png -------------------------------------------------------------------------------- /public/img/icons/apple-touch-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbaladinur/color-extractor/HEAD/public/img/icons/apple-touch-icon-152x152.png -------------------------------------------------------------------------------- /public/img/icons/apple-touch-icon-180x180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbaladinur/color-extractor/HEAD/public/img/icons/apple-touch-icon-180x180.png -------------------------------------------------------------------------------- /public/img/icons/apple-touch-icon-60x60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbaladinur/color-extractor/HEAD/public/img/icons/apple-touch-icon-60x60.png -------------------------------------------------------------------------------- /public/img/icons/apple-touch-icon-76x76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbaladinur/color-extractor/HEAD/public/img/icons/apple-touch-icon-76x76.png -------------------------------------------------------------------------------- /public/img/icons/msapplication-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbaladinur/color-extractor/HEAD/public/img/icons/msapplication-icon-144x144.png -------------------------------------------------------------------------------- /public/img/icons/android-chrome-maskable-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbaladinur/color-extractor/HEAD/public/img/icons/android-chrome-maskable-192x192.png -------------------------------------------------------------------------------- /public/img/icons/android-chrome-maskable-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iqbaladinur/color-extractor/HEAD/public/img/icons/android-chrome-maskable-512x512.png -------------------------------------------------------------------------------- /colors_data/content.json: -------------------------------------------------------------------------------- 1 | [ 2 | ["#000323ff", "#01ffe3ff", "#ffffffff"], 3 | ["#01ffe3ff", "#00112dff", "#ffffffff"], 4 | ["#ffefe5ff", "#fcc861ff", "#211d1dff"] 5 | ] -------------------------------------------------------------------------------- /colors_data/sky.json: -------------------------------------------------------------------------------- 1 | [ 2 | ["#0060beff", "#018ddaff", "#018fd9ff", "#006cc7ff", "#0167bcff"], 3 | ["#bf4e18ff", "#d8601cff", "#e56b1eff", "#be4d18ff", "#a33a14ff"] 4 | ] -------------------------------------------------------------------------------- /colors_data/beautiful.json: -------------------------------------------------------------------------------- 1 | [ 2 | ["#0d2225ff", "#0d2829ff", "#0f292aff", "#0d292aff", "#0e2829ff"], 3 | ["#daa313ff", "#c98159ff", "#d9a01dff", "#d8a111ff", "#c78e1aff"] 4 | ] -------------------------------------------------------------------------------- /colors_data/facebook.json: -------------------------------------------------------------------------------- 1 | [ 2 | ["#ffffffff", "#18acfeff", "#18adfeff", "#19aeffff", "#0165e1ff"], 3 | ["#ffffffff", "#c0cce5ff", "#819accff", "#4469b3ff", "#4267b2f0"] 4 | ] -------------------------------------------------------------------------------- /colors_data/gentle.json: -------------------------------------------------------------------------------- 1 | [ 2 | ["#5481bbff", "#3e72abff", "#9c8e92ff", "#5c4747ff", "#232b4dff"], 3 | ["#404f40ff", "#363e26ff", "#626941ff", "#9ba264ff", "#bcc57fff"] 4 | ] -------------------------------------------------------------------------------- /colors_data/coffee.json: -------------------------------------------------------------------------------- 1 | [ 2 | ["#bd8857ff", "#ceba99ff", "#211710ff", "#3a1911ff", "#745a47ff"], 3 | ["#5f3e2eff", "#8c614dff", "#300701ff", "#140602ff", "#6f2e11ff"] 4 | ] -------------------------------------------------------------------------------- /colors_data/gaming.json: -------------------------------------------------------------------------------- 1 | [ 2 | ["#463181ff", "#293acbff", "#b838e0ff", "#a81e66ff", "#fa613dff"], 3 | ["#5950cdff", "#52bff1ff", "#c0ebf0ff", "#0ef0b3ff", "#cc45f7ff"] 4 | ] -------------------------------------------------------------------------------- /colors_data/spring.json: -------------------------------------------------------------------------------- 1 | [ 2 | ["#f2f7fdff", "#32922dff", "#5eb845ff", "#0e3a35ff", "#acc756ff"], 3 | ["#46a211ff", "#380a0aff", "#1b8a18ff", "#eb9507ff", "#9e4b98ff"] 4 | ] -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | [*.{js,jsx,ts,tsx,vue}] 2 | indent_style = space 3 | indent_size = 2 4 | end_of_line = lf 5 | trim_trailing_whitespace = true 6 | insert_final_newline = true 7 | max_line_length = 100 8 | -------------------------------------------------------------------------------- /colors_data/morning.json: -------------------------------------------------------------------------------- 1 | [ 2 | ["#f2f6f9ff", "#d3b70fff", "#fdeac8ff", "#ca9126ff"], 3 | ["#7d8eacff", "#aa9b90ff", "#f1c962ff", "#eba544ff", "#eece8aff"], 4 | ["#a6ceebff", "#667b6dff", "#fade92ff", "#fbd74eff", "#e0e48d"] 5 | ] -------------------------------------------------------------------------------- /colors_data/car.json: -------------------------------------------------------------------------------- 1 | [ 2 | ["#212121ff", "#ad0f0eff", "#ab100eff", "#aa100eff", "#a9110eff"], 3 | ["#010101ff", "#1b292cff", "#1a282bff", "#1c2a2dff", "#1e2c2fff"], 4 | ["#002569ff", "#0047aeff", "#004ca1ff", "#003797ff", "#00459fff"] 5 | ] -------------------------------------------------------------------------------- /colors_data/travel.json: -------------------------------------------------------------------------------- 1 | [ 2 | ["#c3cff9ff", "#00236fff", "#00297bff", "#002a7eff", "#00206bff"], 3 | ["#feb745ff", "#ffc15eff", "#ffc25fff", "#ffae39ff", "#39190aff"], 4 | ["#92c0cdff", "#7aadc2ff", "#7eaec2ff", "#82b3c4ff", "#379aafff"] 5 | ] -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": "./", 4 | "paths": { 5 | "@/*":["src/*"] 6 | } 7 | }, 8 | "exclude": [ 9 | "node_modules", 10 | "dist" 11 | ] 12 | } -------------------------------------------------------------------------------- /colors_data/twitter.json: -------------------------------------------------------------------------------- 1 | [ 2 | ["#50abf1ff", "#40a6f0ff", "#3ca4f0ff", "#55aef1ff", "#97caf6ff"], 3 | ["#d1e7fbff", "#c2dff9ff", "#64b3f2ff", "#6db7f3ff", "#7bbdf4ff"], 4 | ["#e0effcff", "#c9e3faff", "#a4d0f7ff", "#a8d2f7ff", "#b0d6f8ff"] 5 | ] -------------------------------------------------------------------------------- /colors_data/evening.json: -------------------------------------------------------------------------------- 1 | [ 2 | ["#0e0000ff", "#eb62a9ff", "#bd976eff", "#c97d53ff", "#f1904fff"], 3 | ["#8a6b9bff", "#171014ff", "#e2717fff", "#6b4a55ff", "#3c3a5aff"], 4 | ["#323b55ff", "#31393bff", "#5f4348ff", "#e98a59ff", "#f5ba8eff"] 5 | ] -------------------------------------------------------------------------------- /colors_data/winter.json: -------------------------------------------------------------------------------- 1 | [ 2 | ["#fdfeffff", "#3d91f8ff", "#90c7faff", "#6faea2ff", "#c3bcb4ff"], 3 | ["#090315ff", "#1c37d2ff", "#281e63ff", "#b6a2eaff", "#9965a7ff"], 4 | ["#e3efe7ff", "#035bc4ff", "#032879ff", "#1b4b91ff", "#9ed1dcff"] 5 | ] -------------------------------------------------------------------------------- /src/assets/css/tailwind.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Inter&family=Yellowtail&display=swap'); 2 | @tailwind base; 3 | @tailwind components; 4 | @tailwind utilities; 5 | 6 | html { 7 | font-family: 'Inter', sans-serif; 8 | } 9 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable linebreak-style */ 2 | const tailwind = require('tailwindcss'); 3 | const autoprefixer = require('autoprefixer'); 4 | 5 | module.exports = { 6 | plugins: [ 7 | autoprefixer, 8 | tailwind, 9 | ], 10 | }; 11 | -------------------------------------------------------------------------------- /src/modules/CreateWebWorker.js: -------------------------------------------------------------------------------- 1 | const createWebWorker = (fn) => { 2 | const blob = new Blob(['self.onmessage = ', fn.toString()], { type: 'text/javascript' }); 3 | const blobUrl = URL.createObjectURL(blob); 4 | return new Worker(blobUrl); 5 | }; 6 | 7 | export default createWebWorker; 8 | -------------------------------------------------------------------------------- /colors_data/love.json: -------------------------------------------------------------------------------- 1 | [ 2 | ["#ff0303ff", "#ff5757ff", "#ff7171ff", "#ff4949ff", "#ff5656ff"], 3 | ["#d78681ff", "#f5ab8eff", "#fdbd99ff", "#fecda7ff", "#461123ff"], 4 | ["#e39184ff", "#dc8a80ff", "#f9b091ff", "#fbb796ff", "#fdc39eff"], 5 | ["#e08e81ff", "#f1a58aff", "#f4aa8dff", "#fdc29dff", "#fddfb5ff"] 6 | ] -------------------------------------------------------------------------------- /public/img/icons/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | #ffffff -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | pwa: { 3 | name: 'Biancoir', 4 | themeColor: '#EBF4FF', 5 | msTileColor: '#4A5568', 6 | appleMobileWebAppCapable: 'yes', 7 | appleMobileWebAppStatusBarStyle: '#EBF4FF', 8 | workboxOptions: { 9 | skipWaiting: true, 10 | }, 11 | }, 12 | }; 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /colors_data/autumn.json: -------------------------------------------------------------------------------- 1 | [ 2 | ["#a5dffbff", "#07262bff", "#f06502ff", "#e5aa2eff", "#a55317ff"], 3 | ["#141604ff", "#d0ad07ff", "#6d8907ff", "#5b340cff", "#cec79fff"], 4 | ["#fcd04aff", "#d23014ff", "#ef832bff", "#863a34ff", "#fff8e6ff"], 5 | ["#190C07ff", "#ec9f14ff", "#ae3704ff", "#641805ff", "#dd6305ff"] 6 | ] -------------------------------------------------------------------------------- /src/helper/FileReader.js: -------------------------------------------------------------------------------- 1 | const readPictureAsBase64 = (pictureSrc) => new Promise((resolve, reject) => { 2 | const fileReader = new FileReader(); 3 | fileReader.onerror = (error) => { 4 | reject(error); 5 | }; 6 | 7 | fileReader.onloadend = (res) => { 8 | resolve(res); 9 | }; 10 | fileReader.readAsDataURL(pictureSrc); 11 | }); 12 | 13 | export default readPictureAsBase64; 14 | -------------------------------------------------------------------------------- /tests/unit/example.spec.js: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils'; 2 | import HelloWorld from '@/components/HelloWorld.vue'; 3 | 4 | describe('HelloWorld.vue', () => { 5 | it('renders props.msg when passed', () => { 6 | const msg = 'new message'; 7 | const wrapper = shallowMount(HelloWorld, { 8 | propsData: { msg }, 9 | }); 10 | expect(wrapper.text()).toMatch(msg); 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import VueRouter from 'vue-router'; 3 | import Home from '../views/Home.vue'; 4 | 5 | Vue.use(VueRouter); 6 | 7 | const routes = [ 8 | { 9 | path: '/', 10 | name: 'Home', 11 | component: Home, 12 | }, 13 | ]; 14 | 15 | const router = new VueRouter({ 16 | mode: 'history', 17 | base: process.env.BASE_URL, 18 | routes, 19 | }); 20 | 21 | export default router; 22 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import VueGtag from 'vue-gtag'; 3 | import App from './App.vue'; 4 | import './registerServiceWorker'; 5 | import router from './router'; 6 | import store from './store'; 7 | import '@/assets/css/tailwind.css'; 8 | 9 | if (process.env.NODE_ENV) { 10 | Vue.use(VueGtag, { 11 | config: { id: 'UA-169647352-4' }, 12 | }); 13 | } 14 | 15 | Vue.config.productionTip = false; 16 | new Vue({ 17 | router, 18 | store, 19 | render: (h) => h(App), 20 | }).$mount('#app'); 21 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | theme: { 3 | extend: { 4 | height: { 5 | custom: 'calc(100vh - 250px)', 6 | custom2: '400px', 7 | }, 8 | borderRadius: { 9 | xl: '20px', 10 | xxl: '40px', 11 | }, 12 | }, 13 | }, 14 | experimental: { 15 | applyComplexClasses: true, 16 | }, 17 | variants: { 18 | borderWidth: ['responsive', 'hover', 'focus'], 19 | borderColor: ['responsive', 'hover', 'focus'], 20 | }, 21 | plugins: [], 22 | purge: { 23 | enabled: process.env.NODE_ENV === 'production', 24 | content: [ 25 | './public/**/*.html', 26 | './src/**/*.vue', 27 | ], 28 | }, 29 | }; 30 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true, 5 | }, 6 | extends: [ 7 | 'plugin:vue/essential', 8 | '@vue/airbnb', 9 | ], 10 | parserOptions: { 11 | parser: 'babel-eslint', 12 | }, 13 | rules: { 14 | 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 15 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 16 | 'max-len': 'off', 17 | 'linebreak-style': 'off' 18 | }, 19 | overrides: [ 20 | { 21 | files: [ 22 | '**/__tests__/*.{j,t}s?(x)', 23 | '**/tests/unit/**/*.spec.{j,t}s?(x)', 24 | ], 25 | env: { 26 | jest: true, 27 | }, 28 | }, 29 | ], 30 | }; 31 | -------------------------------------------------------------------------------- /src/components/ImgDisplay.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 31 | -------------------------------------------------------------------------------- /src/assets/github.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/icons/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "App", 3 | "icons": [ 4 | { 5 | "src": "\/android-icon-36x36.png", 6 | "sizes": "36x36", 7 | "type": "image\/png", 8 | "density": "0.75" 9 | }, 10 | { 11 | "src": "\/android-icon-48x48.png", 12 | "sizes": "48x48", 13 | "type": "image\/png", 14 | "density": "1.0" 15 | }, 16 | { 17 | "src": "\/android-icon-72x72.png", 18 | "sizes": "72x72", 19 | "type": "image\/png", 20 | "density": "1.5" 21 | }, 22 | { 23 | "src": "\/android-icon-96x96.png", 24 | "sizes": "96x96", 25 | "type": "image\/png", 26 | "density": "2.0" 27 | }, 28 | { 29 | "src": "\/android-icon-144x144.png", 30 | "sizes": "144x144", 31 | "type": "image\/png", 32 | "density": "3.0" 33 | }, 34 | { 35 | "src": "\/android-icon-192x192.png", 36 | "sizes": "192x192", 37 | "type": "image\/png", 38 | "density": "4.0" 39 | } 40 | ] 41 | } -------------------------------------------------------------------------------- /src/components/Notifier.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 41 | -------------------------------------------------------------------------------- /src/components/palette.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 35 | 36 | 39 | -------------------------------------------------------------------------------- /src/components/Copy.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 43 | 44 | 49 | -------------------------------------------------------------------------------- /colors_data/README.md: -------------------------------------------------------------------------------- 1 | # HOW TO CONTRIBUTE 2 | 3 | - Clone this repository. 4 | ```bash 5 | git clone https://github.com/iqbaladinur/color-extractor.git 6 | ``` 7 | - Fetch all. 8 | ```bash 9 | git fetch --all 10 | ``` 11 | - Make new branch from **develop** branch. 12 | ```bash 13 | git checkout develop 14 | git checkout -b feat/add_your_branch_name 15 | ``` 16 | - Add json file with keyword as a name (should be lower case) in this directory ex: `leaf.json`. 17 | - You can added up to 5 color palettes. More than that will break the UI. 18 | - Follow this format: 19 | ``` 20 | [ 21 | ["#e4aca9ff","#c43232ff","#bb1516ff","#ab1213ff","#ab1314ff"], 22 | ... 23 | ] 24 | ``` 25 | - Commit & push your branch. 26 | ```bash 27 | git push origin feat/add_your_branch_name 28 | ``` 29 | - Make Pull Request into **develop** branch 30 | 31 | 32 | # CONTRIBUTE VIA ISSUE 33 | Make issue with [request palette] on the title fox ex: `[request palette] Please add this color palette for 'apple' keyword`. Someone will make pull request for that. -------------------------------------------------------------------------------- /src/components/Footer.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 27 | 32 | -------------------------------------------------------------------------------- /src/components/Navbar.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 34 | 35 | 40 | -------------------------------------------------------------------------------- /src/registerServiceWorker.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-console */ 2 | 3 | import { register } from 'register-service-worker'; 4 | import store from '@/store'; 5 | 6 | if (process.env.NODE_ENV === 'production') { 7 | register(`${process.env.BASE_URL}service-worker.js`, { 8 | ready() { 9 | console.log( 10 | 'App is being served from cache by a service worker.\n' 11 | + 'For more details, visit https://goo.gl/AFskqB', 12 | ); 13 | }, 14 | registered() { 15 | console.log('Service worker has been registered.'); 16 | }, 17 | cached() { 18 | console.log('Content has been cached for offline use.'); 19 | }, 20 | updatefound() { 21 | console.log('New content is downloading.'); 22 | }, 23 | updated() { 24 | store.commit('setUpdateAvaibility', true); 25 | console.log('New content is available; please refresh.'); 26 | }, 27 | offline() { 28 | console.log('No internet connection found. App is running in offline mode.'); 29 | }, 30 | error(error) { 31 | console.error('Error during service worker registration:', error); 32 | }, 33 | }); 34 | } 35 | -------------------------------------------------------------------------------- /src/helper/CommonHelper.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/prefer-default-export */ 2 | const copyToClipboard = (text) => { 3 | const Input = document.createElement('input'); 4 | Input.setAttribute('type', 'text'); 5 | Input.value = text; 6 | Input.style.position = 'absolute'; 7 | Input.style.top = 0; 8 | Input.style.marginTop = '-100px'; 9 | const body = document.getElementsByTagName('body')[0]; 10 | body.appendChild(Input); 11 | Input.select(); 12 | Input.setSelectionRange(0, 99999); 13 | document.execCommand('copy'); 14 | Input.remove(); 15 | }; 16 | const debounce = (func, wait, immediate) => { 17 | let timeout; 18 | // eslint-disable-next-line func-names 19 | return function () { 20 | const context = this; 21 | // eslint-disable-next-line prefer-rest-params 22 | const args = arguments; 23 | const later = () => { 24 | timeout = null; 25 | if (!immediate) func.apply(context, args); 26 | }; 27 | const callNow = immediate && !timeout; 28 | clearTimeout(timeout); 29 | timeout = setTimeout(later, wait); 30 | if (callNow) func.apply(context, args); 31 | }; 32 | }; 33 | export { 34 | copyToClipboard, 35 | debounce, 36 | }; 37 | -------------------------------------------------------------------------------- /src/components/palettes.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 30 | 31 | 59 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Biancoir with the contributions of: 4 | - Iqbal Adi Nurmansyah (iqbaladinur@gmail.com) 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in all 14 | copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 22 | SOFTWARE. -------------------------------------------------------------------------------- /src/views/Home.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 34 | 35 | 48 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |

5 | Biancoir 6 |

7 |
8 | 9 | [![Netlify Status](https://api.netlify.com/api/v1/badges/b6d2d333-0ace-46f8-a509-ff38ea58336c/deploy-status)](https://app.netlify.com/sites/bianco/deploys) 10 | 11 | ## Description 12 | Biancoir is website that provide color extraction from an image with quantization algorithm. 13 | Visit on [Biancoir](https://bianco.netlify.app). 14 | 15 | ![Biancoir](https://raw.githubusercontent.com/iqbaladinur/color-extractor/master/screen_capture/ss.png) 16 | 17 | ## Contribute for palette inspiration 18 | Biancoir provide feature palettes recomendation with keyword. You can contribute palettes here. 19 | 20 | [CONTRIBUTE PALETTES](https://github.com/iqbaladinur/color-extractor/tree/master/colors_data). 21 | 22 | ## Local Development 23 | ``` 24 | npm install 25 | ``` 26 | 27 | ### Compiles and hot-reloads for development 28 | ``` 29 | npm run serve 30 | ``` 31 | 32 | ### Compiles and minifies for production 33 | ``` 34 | npm run build 35 | ``` 36 | 37 | ### Customize configuration 38 | See [Configuration Reference](https://cli.vuejs.org/config/). 39 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "biancoir", 3 | "version": "1.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "test:unit": "vue-cli-service test:unit", 9 | "lint": "vue-cli-service lint" 10 | }, 11 | "dependencies": { 12 | "autoprefixer": "^9.8.0", 13 | "clusterfck": "git+https://github.com/iqbaladinur/clustering.git", 14 | "core-js": "^3.6.4", 15 | "register-service-worker": "^1.7.1", 16 | "tailwindcss": "^1.7.3", 17 | "vue": "^2.6.11", 18 | "vue-gtag": "^1.8.0", 19 | "vue-router": "^3.1.6", 20 | "vuex": "^3.1.3" 21 | }, 22 | "devDependencies": { 23 | "@vue/cli-plugin-babel": "^4.3.0", 24 | "@vue/cli-plugin-eslint": "^4.3.0", 25 | "@vue/cli-plugin-pwa": "^4.3.0", 26 | "@vue/cli-plugin-router": "^4.3.0", 27 | "@vue/cli-plugin-unit-jest": "^4.3.0", 28 | "@vue/cli-plugin-vuex": "^4.3.0", 29 | "@vue/cli-service": "^4.3.0", 30 | "@vue/eslint-config-airbnb": "^5.0.2", 31 | "@vue/test-utils": "1.0.0-beta.31", 32 | "babel-eslint": "^10.1.0", 33 | "eslint": "^6.7.2", 34 | "eslint-plugin-import": "^2.20.2", 35 | "eslint-plugin-vue": "^6.2.2", 36 | "node-sass": "^4.12.0", 37 | "sass-loader": "^8.0.2", 38 | "vue-template-compiler": "^2.6.11" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # CONTRIBUTE FOR THE CODE 2 | - Please make Pull Request into **develop** branch. 3 | - Please add proper label for issue or PR [label description](https://github.com/iqbaladinur/color-extractor/labels). 4 | - Please describe what you has been changed, for example. 5 | ``` 6 | #added_palettes 7 | - 8 | - 9 | - 10 | #added_feature 11 | - 12 | - 13 | - 14 | #fixed 15 | - 16 | - 17 | - 18 | etc 19 | ``` 20 | 21 | # HOW TO CONTRIBUTE FOR COLOR PALETTES 22 | 23 | - Clone this repository. 24 | ```bash 25 | git clone https://github.com/iqbaladinur/color-extractor.git 26 | ``` 27 | - Fetch all. 28 | ```bash 29 | git fetch --all 30 | ``` 31 | - Make new branch from **develop** branch. 32 | ```bash 33 | git checkout develop 34 | git checkout -b feat/add_your_branch_name 35 | ``` 36 | - Add json file with keyword as a name (should be lower case) in this directory ex: `leaf.json`. 37 | - You can added up to 5 color palettes. More than that will break the UI. 38 | - Follow this format: 39 | ``` 40 | [ 41 | ["#e4aca9ff","#c43232ff","#bb1516ff","#ab1213ff","#ab1314ff"], 42 | ... 43 | ] 44 | ``` 45 | - Commit & push your branch. 46 | ```bash 47 | git push origin feat/add_your_branch_name 48 | ``` 49 | - Make Pull Request into **develop** branch 50 | 51 | # CONTRIBUTE VIA ISSUE 52 | Make issue with [request palette] on the title fox ex: `[request palette] Please add this color palette for 'apple' keyword`. Someone will make pull request for that. -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Biancoir 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 25 |
26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /src/modules/ClusterFvck.js: -------------------------------------------------------------------------------- 1 | import { kmeans } from 'clusterfck'; 2 | import createWebWorker from '@/modules/CreateWebWorker'; 3 | /** 4 | * const colors = [ 5 | * [20, 20, 80], 6 | * [22, 22, 90], 7 | * ] 8 | */ 9 | const createArray = createWebWorker((imageArray) => { 10 | const colors = []; 11 | for (let i = 0; i < imageArray.data.length; i += 4) { 12 | colors.push([imageArray.data[i], imageArray.data[i + 1], imageArray.data[i + 2]]); 13 | } 14 | postMessage(colors); 15 | }); 16 | const convertRGBAtoHex = (...rgba) => { 17 | const convertedToHex = rgba.map((v) => { 18 | const hex = v.toString(16); 19 | return hex.length < 2 ? `0${hex}` : hex; 20 | }); 21 | return `#${convertedToHex.join('')}`; 22 | }; 23 | const clusterColor = (arrayOfRGB, totalCluster) => new Promise((resolve, reject) => { 24 | createArray.postMessage(arrayOfRGB); 25 | createArray.onmessage = (res) => { 26 | const cluster = kmeans(res.data, totalCluster); 27 | const readyData = cluster.map((arrayOfCluster) => { 28 | const totalRgb = arrayOfCluster.reduce((acc, currentValue) => { 29 | acc[0] += currentValue[0]; 30 | acc[1] += currentValue[1]; 31 | acc[2] += currentValue[2]; 32 | return acc; 33 | }, [0, 0, 0]); 34 | const r = Math.round(totalRgb[0] / arrayOfCluster.length); 35 | const g = Math.round(totalRgb[1] / arrayOfCluster.length); 36 | const b = Math.round(totalRgb[2] / arrayOfCluster.length); 37 | const hexCode = convertRGBAtoHex(r, g, b, 255); 38 | return { 39 | colorHex: hexCode, 40 | freq: arrayOfCluster.length, 41 | }; 42 | }); 43 | readyData.sort((a, b) => (a.freq > b.freq ? -1 : 1)); 44 | resolve(readyData); 45 | }; 46 | createArray.onerror = (error) => { 47 | reject(error); 48 | }; 49 | }); 50 | export default clusterColor; 51 | -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Vuex from 'vuex'; 3 | 4 | Vue.use(Vuex); 5 | 6 | export default new Vuex.Store({ 7 | state: { 8 | topColors: [], 9 | isExtracting: false, 10 | imgSource: null, 11 | isFetchingImg: false, 12 | imgDomObject: null, 13 | updateAvaible: false, 14 | }, 15 | mutations: { 16 | setTopColors: (state, payload) => { 17 | state.topColors = payload; 18 | }, 19 | toggleExtraction: (state) => { 20 | state.isExtracting = !state.isExtracting; 21 | }, 22 | setImageSource: (state, imgSource) => { 23 | state.imgSource = imgSource; 24 | }, 25 | toggleIsFetchingImg: (state) => { 26 | state.isFetchingImg = !state.isFetchingImg; 27 | }, 28 | setImgDomObject: (state, domObjct) => { 29 | state.imgDomObject = domObjct; 30 | }, 31 | setUpdateAvaibility: (state, booleanStatus) => { 32 | state.updateAvaible = booleanStatus; 33 | }, 34 | }, 35 | actions: { 36 | setTopColors: (context, payload) => { 37 | context.commit('setTopColors', payload); 38 | }, 39 | toggleExtraction: (context) => { 40 | context.commit('toggleExtraction'); 41 | }, 42 | setImageSource: (context, imgSource) => { 43 | context.commit('setImageSource', imgSource); 44 | }, 45 | toggleIsFetchingImg: (context) => { 46 | context.commit('toggleIsFetchingImg'); 47 | }, 48 | setImgDomObject: (context, domObjct) => { 49 | context.commit('setImgDomObject', domObjct); 50 | }, 51 | setUpdateAvaibility: (context, booleanStatus) => { 52 | context.commit('setUpdateAvaibility', booleanStatus); 53 | }, 54 | }, 55 | getters: { 56 | getTopColors: (state) => state.topColors, 57 | getExtractionStatus: (state) => state.isExtracting, 58 | getImgSource: (state) => state.imgSource, 59 | getFetchingImgStatus: (state) => state.isFetchingImg, 60 | getImgDomObject: (state) => state.imgDomObject, 61 | getUpdateAvaibility: (state) => state.updateAvaible, 62 | }, 63 | modules: {}, 64 | }); 65 | -------------------------------------------------------------------------------- /src/components/Colors.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 58 | 66 | -------------------------------------------------------------------------------- /src/components/ColorsRecomendation.vue: -------------------------------------------------------------------------------- 1 | 34 | 35 | 84 | -------------------------------------------------------------------------------- /src/modules/QuantityImageData.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-unused-vars */ 2 | import createWebWorker from '@/modules/CreateWebWorker'; 3 | 4 | const getTopImageData = createWebWorker((payload) => { 5 | const quantifyImageData = (arrayOfImage, merged = false, quantity = 10) => { 6 | const convertRGBAtoHex = (...rgba) => { 7 | const convertedToHex = rgba.map((v) => { 8 | const hex = v.toString(16); 9 | return hex.length < 2 ? `0${hex}` : hex; 10 | }); 11 | return `#${convertedToHex.join('')}`; 12 | }; 13 | const countAveragePerMergedPixel = (pixelDivider, arrayOfImageData) => { 14 | const totalPixel = pixelDivider / 4; 15 | let r = 0; 16 | let g = 0; 17 | let b = 0; 18 | let a = 0; 19 | for (let index = 0; index < arrayOfImageData.length; index += 4) { 20 | r += arrayOfImageData[index]; 21 | g += arrayOfImageData[index + 1]; 22 | b += arrayOfImageData[index + 2]; 23 | a += arrayOfImageData[index + 3]; 24 | } 25 | return { 26 | r: Math.round(r / totalPixel), 27 | g: Math.round(g / totalPixel), 28 | b: Math.round(b / totalPixel), 29 | a: Math.round(a / totalPixel), 30 | }; 31 | }; 32 | let pixelDivider = 4; 33 | if (merged) { 34 | if (arrayOfImage.length % 8 === 0) { 35 | pixelDivider *= 8; 36 | } else if (arrayOfImage.length % 6 === 0) { 37 | pixelDivider *= 6; 38 | } else if (arrayOfImage.length % 3) { 39 | pixelDivider *= 3; 40 | } 41 | } 42 | // eslint-disable-next-line prefer-const 43 | let quantifiedColor = {}; 44 | for (let index = 0; index < arrayOfImage.length; index += pixelDivider) { 45 | const { 46 | r, g, b, a, 47 | } = countAveragePerMergedPixel(pixelDivider, arrayOfImage.slice(index, index + pixelDivider)); 48 | if (arrayOfImage[index + 3] === 255) { 49 | const hexColor = convertRGBAtoHex(r, g, b, a); 50 | if (quantifiedColor[hexColor]) { 51 | quantifiedColor[hexColor] += 1; 52 | } else { 53 | quantifiedColor[hexColor] = 1; 54 | } 55 | } 56 | } 57 | const unSortedArray = Object.entries(quantifiedColor).map((array) => ({ colorHex: array[0], freq: array[1] })); 58 | const sortColor = (a, b) => (a.freq > b.freq ? -1 : 1); 59 | return unSortedArray.sort(sortColor).slice(0, quantity); 60 | }; 61 | const result = quantifyImageData(payload.data.imgArray, payload.data.merge, payload.data.quantity); 62 | postMessage(result); 63 | }); 64 | 65 | const quantifyColor = (payload) => new Promise((resolve, reject) => { 66 | getTopImageData.postMessage(payload); 67 | getTopImageData.onmessage = (res) => { 68 | resolve(res); 69 | }; 70 | getTopImageData.onerror = (error) => { 71 | reject(error); 72 | }; 73 | }); 74 | 75 | export default quantifyColor; 76 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 35 | 36 | 68 | 95 | -------------------------------------------------------------------------------- /src/components/PictureLoader.vue: -------------------------------------------------------------------------------- 1 | 33 | 34 | 171 | 176 | -------------------------------------------------------------------------------- /public/img/icons/safari-pinned-tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 7 | 8 | Created by potrace 1.11, written by Peter Selinger 2001-2013 9 | 10 | 12 | 148 | 149 | 150 | --------------------------------------------------------------------------------