ch/Caps-Server
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Show average colors in grid

Browse Source
This commit is contained in:
Christoph Hagen 2022-12-20 00:44:11 +01:00
parent b985cf3a33
commit bb3efbf6c5
3 changed files with 115 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
Public/grid.css
View File

@ -1,19 +1,29 @@
body { body {
margin: 0; margin: 0;
background-color: gray;
}
#top-bar {
position: fixed;
width: 100%;
height: 30px;
padding: 10px;
display: flex;
} }
#image-canvas { #image-canvas {
width: 2000px; width: 2000px;
background-color: gray;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
padding-left: 25px; padding-left: 25px;
padding-top: 6px; padding-top: 6px;
margin-top: 50px;
} }
#image-canvas img { #image-canvas img {
width: 50px; width: 50px;
height: 50px; height: 50px;
border-radius: 25px; border-radius: 25px;
margin-top: -6px; margin-top: -6px;
box-sizing: border-box;
cursor: pointer;
} }
#image-canvas img:nth-child(80n+42) { #image-canvas img:nth-child(80n+42) {
margin-left: -25px; margin-left: -25px;
@ -28,3 +38,18 @@ body {
left: 25px; left: 25px;
display: none; display: none;
} }
#show-color-button {
height: 20px;
font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 16px;
background-color: orange;
padding: 5px 10px;
border-radius: 8px;
cursor: pointer;
}
#show-color-button:hover {
background-color: rgb(255, 174, 26);
}

3
Public/grid.html
View File

@ -19,6 +19,9 @@
<meta name="description" content="A grid view of all bottle caps in my collection. Try to create an image with them."/> <meta name="description" content="A grid view of all bottle caps in my collection. Try to create an image with them."/>
</head> </head>
<body> <body>
<div id="top-bar">
<div id="show-color-button" onclick="toggleColors()">Toggle colors</div>
</div>
<div id="image-canvas"> <div id="image-canvas">
<div id="selected-cap-circle"></div> <div id="selected-cap-circle"></div>
</div> </div>

87
Public/grid.js
View File

@ -39,8 +39,9 @@ const elements = imageCanvas.getElementsByTagName("img");
const selectedCapCircle = document.getElementById("selected-cap-circle"); const selectedCapCircle = document.getElementById("selected-cap-circle");
imageCanvas.addEventListener("click", function(event) { imageCanvas.addEventListener("click", function(event) {
const yOffset = 50;
const xPosition = event.clientX - imageCanvas.getBoundingClientRect().left; const xPosition = event.clientX - imageCanvas.getBoundingClientRect().left;
const yPosition = event.clientY - imageCanvas.getBoundingClientRect().top; const yPosition = event.clientY - imageCanvas.getBoundingClientRect().top + yOffset;
var row = Math.floor(yPosition / effectiveHeight); var row = Math.floor(yPosition / effectiveHeight);
@ -103,3 +104,87 @@ imageCanvas.addEventListener("click", function(event) {
selectedPosition = null; selectedPosition = null;
}); });
function averageColor(imageElement) {
var canvas = document.createElement('canvas');
var context = canvas.getContext && canvas.getContext('2d');
if (!context) {
return { r: 255, g: 0, b: 0 };
}
// Set the height and width equal
// to that of the canvas and the image
var height = canvas.height =
imageElement.naturalHeight ||
imageElement.offsetHeight ||
imageElement.height;
var width = canvas.width =
imageElement.naturalWidth ||
imageElement.offsetWidth ||
imageElement.width;
// Draw the image to the canvas
context.drawImage(imageElement, 0, 0);
// Get the data of the image
try {
var imgData = context.getImageData(0, 0, width, height);
} catch(e) {
/* security error, img on diff domain */alert('x');
return { r: 255, g: 0, b: 0 };
}
// Get the length of image data object
var length = imgData.data.length;
const pixelCount = height * width;
const halfX = width / 2;
const halfY = height / 2;
var rgb = { r: 0, g: 0, b: 0 };
var count = 0;
for (var i = 0; i < pixelCount; i += 1) {
// Exclude everything outside of circle
const x = i % width - halfX;
const y = Math.floor(i / width) - halfY;
const distanceToCenter = Math.sqrt(x**2 + y**2);
if (distanceToCenter > halfY) {
continue;
}
// Sum all values of the colour
const offset = 4 * i;
rgb.r += imgData.data[offset];
rgb.g += imgData.data[offset + 1];
rgb.b += imgData.data[offset + 2];
count += 1;
}
// Find the averages
rgb.r = Math.floor(rgb.r / count);
rgb.g = Math.floor(rgb.g / count);
rgb.b = Math.floor(rgb.b / count);
return rgb;
}
for (let i = 0; i < capPositions.length; i += 1) {
const element = elements[i];
element.onload = function() {
const rgb = averageColor(element);
const color = `rgb(${rgb.r},${rgb.g},${rgb.b})`;
element.style.backgroundColor = color;
}
}
var showColors = false;
function toggleColors() {
showColors = !showColors;
const padding = showColors ? "50px" : "0px";
for (let i = 0; i < capPositions.length; i += 1) {
elements[i].style.paddingLeft = padding;
}
}