Created
April 4, 2023 18:21
-
-
Save ericcarraway/57fc4ae651ec22caa3c5060ca421d8e2 to your computer and use it in GitHub Desktop.
Given a list of image URLs, find the most common aspect ratio and the average aspect ratio.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- Given a list of image URLs, find the most common aspect ratio and the average aspect ratio. --> | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Aspect Ratios</title> | |
| </head> | |
| <body> | |
| <script> | |
| const imageUrls = [ | |
| `https://d3k85nwvn5w8cq.cloudfront.net/images/sxsw-string.webp`, | |
| `https://d3k85nwvn5w8cq.cloudfront.net/images/edm-2021-06-12.webp`, | |
| `https://d3k85nwvn5w8cq.cloudfront.net/images/axios-2021-09-25.webp`, | |
| `https://d3k85nwvn5w8cq.cloudfront.net/images/djmag-2021-09-16.webp`, | |
| `https://d3k85nwvn5w8cq.cloudfront.net/images/edward-2023-03-06.jpg`, | |
| `https://d3k85nwvn5w8cq.cloudfront.net/images/forbes-2020-06-06.webp`, | |
| `https://d3k85nwvn5w8cq.cloudfront.net/images/thewrap-2021-11-19.webp`, | |
| `https://d3k85nwvn5w8cq.cloudfront.net/images/mixdown-2021-08-13.webp`, | |
| `https://d3k85nwvn5w8cq.cloudfront.net/images/engadget-2023-01-31.webp`, | |
| `https://d3k85nwvn5w8cq.cloudfront.net/images/engadget-2021-06-02.webp`, | |
| `https://d3k85nwvn5w8cq.cloudfront.net/images/aithority-2021-11-19.webp`, | |
| `https://d3k85nwvn5w8cq.cloudfront.net/images/shorefire-2021-09-14.webp`, | |
| `https://d3k85nwvn5w8cq.cloudfront.net/images/shorefire-2021-08-11.webp`, | |
| `https://d3k85nwvn5w8cq.cloudfront.net/images/musically-2020-05-27.webp`, | |
| `https://d3k85nwvn5w8cq.cloudfront.net/images/musicradar-2022-03-22.webp`, | |
| `https://d3k85nwvn5w8cq.cloudfront.net/images/musicradar-2021-08-12.webp`, | |
| `https://d3k85nwvn5w8cq.cloudfront.net/images/culturemap-2021-07-16.webp`, | |
| `https://d3k85nwvn5w8cq.cloudfront.net/images/press-image-2022-11-22.png`, | |
| `https://d3k85nwvn5w8cq.cloudfront.net/images/starternoise-2020-06-13.webp`, | |
| `https://d3k85nwvn5w8cq.cloudfront.net/images/youtube-live-2022-02-27-2.webp`, | |
| `https://d3k85nwvn5w8cq.cloudfront.net/images/youtube-live-2022-02-27-1.webp`, | |
| `https://d3k85nwvn5w8cq.cloudfront.net/images/sxsw-mental-health-bob-moses.webp`, | |
| `https://d3k85nwvn5w8cq.cloudfront.net/images/musicbusinessworldwide-2021-11-22.webp`, | |
| `https://d3k85nwvn5w8cq.cloudfront.net/images/AI-While-Preserving-The-Human-Element.webp`, | |
| `https://d3k85nwvn5w8cq.cloudfront.net/images/GettyImages-937060922-87fd34542c854f0896dcfa002bf59f7a.webp`, | |
| `https://d3k85nwvn5w8cq.cloudfront.net/images/1678808533_Tailor-made-non-stop-music-A-startup-has-developed-a-breakthrough-app.webp`, | |
| `https://d3k85nwvn5w8cq.cloudfront.net/images/13-innovative-music-startups-creating-ai-tools-for-artists-record-labels-and-other-creators.webp`, | |
| ]; | |
| let totalAspectRatio = 0; | |
| let aspectRatios = {}; | |
| // Load each image and calculate its aspect ratio. | |
| imageUrls.forEach((url) => { | |
| const image = new Image(); | |
| image.onload = () => { | |
| const aspectRatio = image.width / image.height; | |
| totalAspectRatio += aspectRatio; | |
| // Keep track of the aspect ratio count. | |
| aspectRatios[aspectRatio] = (aspectRatios[aspectRatio] || 0) + 1; | |
| }; | |
| image.src = url; | |
| }); | |
| // Wait for all images to load and calculate the average aspect ratio. | |
| setTimeout(() => { | |
| const count = imageUrls.length; | |
| const averageAspectRatio = totalAspectRatio / count; | |
| // Find the most common aspect ratio. | |
| const commonAspectRatio = Object.keys(aspectRatios).reduce((a, b) => | |
| aspectRatios[a] > aspectRatios[b] ? a : b | |
| ); | |
| console.log(`Average aspect ratio: ${averageAspectRatio.toFixed(2)}`); | |
| console.log(`Most common aspect ratio: ${commonAspectRatio}`); | |
| }, 5000); // Wait for 5 seconds to allow images to load. | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment