From 52e0773945be52498282e5a32853ca25d1334b12 Mon Sep 17 00:00:00 2001 From: pearmini Date: Wed, 17 Nov 2021 09:01:22 +0800 Subject: [PATCH 1/4] feat(colors): extract colors from image --- package.json | 1 + readme.md | 6 +- src/components/ColorPalette.vue | 157 +++++++++++++++++++++++++++++--- src/components/ImagePicker.vue | 34 ++++++- src/data/color/color-hunt.js | 2 +- src/utils/color.js | 8 ++ src/utils/load.js | 4 +- 7 files changed, 193 insertions(+), 19 deletions(-) create mode 100644 src/utils/color.js diff --git a/package.json b/package.json index d7a2e57..e5b4d8d 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "prepare": "husky install" }, "dependencies": { + "colorthief": "^2.3.2", "core-js": "^3.6.5", "element-ui": "^2.15.6", "emoticon.js": "^1.0.0", diff --git a/readme.md b/readme.md index bf7e76c..c79d30e 100644 --- a/readme.md +++ b/readme.md @@ -24,7 +24,11 @@ What it if you can use more colors and more words to make wallpapers to express ![color store](https://i.loli.net/2021/11/08/tHmdewQEgbDnikR.png) -2. There are some emojis and emoticons for your to boost your imagination. +2. Extracts colors from image. + +![image](https://i.loli.net/2021/11/17/tmiIwyrACF51pvj.png) + +3. There are some emojis and emoticons for your to boost your imagination. ![emojis](https://i.loli.net/2021/11/08/IudDlx8psqVPCwG.png) diff --git a/src/components/ColorPalette.vue b/src/components/ColorPalette.vue index b006756..d011ea2 100644 --- a/src/components/ColorPalette.vue +++ b/src/components/ColorPalette.vue @@ -1,7 +1,26 @@ + + From 8d84e438cb9ba950298ae6e4925ffa6d455025c9 Mon Sep 17 00:00:00 2001 From: pearmini Date: Thu, 18 Nov 2021 00:17:14 +0800 Subject: [PATCH 4/4] feat(pages): add image picker for story page --- src/components/ImageColorPicker.vue | 14 +++--- src/pages/Story.vue | 76 +++++++++++++++++++++-------- 2 files changed, 63 insertions(+), 27 deletions(-) diff --git a/src/components/ImageColorPicker.vue b/src/components/ImageColorPicker.vue index dbcbe32..7c404e4 100644 --- a/src/components/ImageColorPicker.vue +++ b/src/components/ImageColorPicker.vue @@ -2,7 +2,10 @@
-
Click to select colors you want to use.
+
+ Click to select {{ maxCount === Infinity ? "" : `up to ${maxCount} ` }}colors you want to + use. +
this.imageColors[index]); - console.log(colors); this.$emit("input", colors); }, }, @@ -82,13 +84,13 @@ export default { }, methods: { handleClickImageColorItem(index) { - if (this.selectedImageColorIndex.length > this.maxCount) { - Message.error(`Only can select ${this.maxCount} colors.`); - return; - } const i = this.selectedImageColorIndex.indexOf(index); const newSelectedImageColorIndex = [...this.selectedImageColorIndex]; if (i === -1) { + if (this.selectedImageColorIndex.length >= this.maxCount) { + Message.error(`Only can select ${this.maxCount} colors.`); + return; + } newSelectedImageColorIndex.push(index); } else { newSelectedImageColorIndex.splice(i, 1); diff --git a/src/pages/Story.vue b/src/pages/Story.vue index 9acd330..ba15aaa 100644 --- a/src/pages/Story.vue +++ b/src/pages/Story.vue @@ -19,24 +19,31 @@ them meaningful.

- There are some colors and words provided by ColorFu. Find the stories behind them and use - them to make your own stories. + There are some colors and words provided by ColorFu, and you can even extract colors from + an image. Find the stories behind them and use them to make your own stories. +

+

+ + + + + + + +

- - - -
- +
@@ -65,7 +72,7 @@ >{{ item }}
-
+

{{ collection.name }}

@@ -98,6 +105,19 @@

+
+ + Make Wallpaper +
@@ -107,6 +127,7 @@ import emojiByGroup from "../data/emoji-by-group.json"; import faces from "../data/emoticons.json"; import { colorStore } from "../data/color"; import { gotoEditor } from "../utils/gotoEditor"; +import ImageColorPicker from "../components/ImageColorPicker.vue"; const emojis = Object.values(emojiByGroup).flat(); @@ -117,18 +138,27 @@ function offset(name) { export default { data() { return { - options: [ + types: [ { value: "color", label: "Color 🌈" }, { value: "emoji", label: "Emoji 😆" }, { value: "emoticon", label: "w(ﾟДﾟ)w" }, ], + modes: [ + { value: "store", label: "From Color Store 🏳️‍🌈" }, + { value: "image", label: "From Image 🏞️" }, + ], selectedValue: "color", + selectedMode: "store", emojis, faces, colorStore, cardSize: 200, + selectedImageColors: [], }; }, + components: { + ImageColorPicker, + }, methods: { handleClickEmoticon(emoticon) { const options = { @@ -265,14 +295,18 @@ export default { } .story-container .el-select { - float: left; margin-top: 1em; + margin-right: 1em; } .story-header { display: flex; align-items: center; - margin: 2.5em 0; + margin: 1em 0; +} + +.storey-make-button { + margin: 1.5em 0; } .story-image { @@ -361,7 +395,7 @@ export default { margin: 0.5em 0; } -.story-body { +.story-body { margin-bottom: 2.5em; }