So I'm making a profile picture uploader because I'm bored. I want it to be like when a user upload a image it extract color from the image using colorthief and change the background-color to the color it extracted but all I got is a error and it only works certain time.
Here's the jsfiddle: https://jsfiddle.net/itzasyran/sw4ftp5u/
Snippet:
const fileInput = document.getElementById("fileInput");
const imageDisplay = document.getElementById("imageDisplay");
const imageDisplayBlur = document.getElementById("imageDisplayBlur");
const dragContainer = document.querySelector(".drag-container");
const colorThief = new ColorThief();
fileInput.addEventListener("change", () => {
const file = fileInput.files[0];
displayImage(file);
});
dragContainer.addEventListener("dragover", (e) => {
e.preventDefault();
dragContainer.classList.add("drag-over");
});
dragContainer.addEventListener("dragleave", (e) => {
e.preventDefault();
dragContainer.classList.remove("drag-over");
});
dragContainer.addEventListener("drop", (e) => {
e.preventDefault();
dragContainer.classList.remove("drag-over");
const file = e.dataTransfer.files[0];
displayImage(file);
});
const displayImage = (file) => {
const reader = new FileReader();
reader.addEventListener("load", () => {
imageDisplay.src = reader.result;
imageDisplayBlur.src = reader.result;
const color = colorThief.getColor(imageDisplay);
document.body.style.backgroundColor = `rgb(${color[0]}, ${color[1]}, ${color[2]})`;
});
reader.readAsDataURL(file);
};@import url('https://fonts.googleapis.com/css?family=Outfit&display=swap');
:root {
--bg-color: rgb(24, 24, 24);
--primary-color: #fff;
--font-family: 'Helvetica Neue', sans-serif;
--logo-font: 'Outfit';
--blur-animation-duration: 5s;
--blur-animation-blur-start: 5px;
--blur-animation-blur-mid: 10px;
--blur-animation-blur-end: 5px;
}
body {
background-color: var(--bg-color);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
color: var(--primary-color);
overflow: hidden;
transition: background-color 0.5s ease-out;
}
form {
margin-bottom: 20px;
}
.title,
.drag {
font-family: var(--font-family);
}
.disclaimer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
color: var(--primary-color);
text-align: center;
padding: 10px;
font-family: var(--font-family);
font-weight: 400;
}
.done {
position: fixed;
bottom: 0;
right: 0;
background-color: rgba(214, 214, 214, 0.8);
padding: 10px;
}
.done h2 {
color: #1f1f1f;
font-size: 24px;
font-weight: bold;
margin: 0;
}
.done h2.donetxt {
text-align: right;
font-family: var(--font-family);
cursor: pointer;
}
.image-container {
position: relative;
width: 200px;
height: 200px;
margin-left: 20vh;
}
#imageDisplay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
max-width: 105%;
max-height: 105%;
border-radius: 50%;
filter: blur(5px);
}
#imageDisplayBlur {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
z-index: 1;
border-radius: 50%;
}<!DOCTYPE html>
<html>
<head>
<title>axysLib</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.0/color-thief.umd.js"></script>
</head>
<body>
<div class="dialog">
<h1 class="title">check log for da error</h1>
<form>
<input type="file" id="fileInput">
</form>
<p class="drag">it mostly work here but not in VSCode or just normal in general</p>
<div class="drag-container">
<span class="drop-area" id="dropArea"></span>
</div>
</div>
<div class="image-container">
<img id="imageDisplay" src="#" aria-hidden="true">
<img id="imageDisplayBlur" src="#" aria-hidden="true">
</div>
<div>
<h4 class="disclaimer">{disclaimer}
</h4>
</div>
<div class="done">
<h2 class="donetxt">Upload</h2>
</div>
<script src="script.js"></script>
</body>
</html>I rewrote the entire code and still doesn't work. It's supposed to change the bg-color instantly but mostly it doesn't change and took couple time for it to work. When I choose image it mostly stay in the dark bg-color or the previous color