Github/screenshot-to-code
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Updated frontend/src/components/ImageUpload.

Browse Source
This commit is contained in:
sweep-ai[bot] 2023-11-22 03:49:53 +00:00 committed by GitHub
parent 644e3e1ddc
commit 808b49d789
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 11 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/src/components/ImageUpload.tsx
View File

@ -2,6 +2,7 @@ import { useState, useEffect, useMemo, useCallback } from "react";
import { useDropzone } from "react-dropzone";
import { toast } from "react-hot-toast";
import axios from 'axios';
import ColorThief from 'color-thief';
const baseStyle = {
flex: 1,
@ -59,6 +60,15 @@ type FileWithPreview = {
.then((response) => {
// Store the returned colors in the component's state
setColors(response.data.colors);
// Extract the dominant color from the uploaded image
try {
const colorThief = new ColorThief();
const dominantColor = colorThief.getColor(dataUrls[0]);
setDominantColor(dominantColor);
} catch (error) {
toast.error("Error extracting dominant color: " + error);
console.error("Error extracting dominant color:", error);
}
})
.catch((error) => {
toast.error("Error extracting colors: " + error);
@ -165,3 +175,4 @@ export default ImageUpload;
<div key={index} style={{ backgroundColor: color, width: '50px', height: '50px' }}></div>
))}
</div>
<div className="dominant-color" style={{ backgroundColor: `rgb(${dominantColor[0]}, ${dominantColor[1]}, ${dominantColor[2]})`, width: '50px', height: '50px' }}></div>