{"id":18455487,"url":"https://github.com/danielhaim1/image-classifier","last_synced_at":"2025-04-22T17:11:05.533Z","repository":{"id":100607025,"uuid":"566327294","full_name":"danielhaim1/image-classifier","owner":"danielhaim1","description":"Classify images by format and size","archived":false,"fork":false,"pushed_at":"2022-11-16T11:43:47.000Z","size":24,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-16T14:56:47.810Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/danielhaim1.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-11-15T12:51:03.000Z","updated_at":"2022-11-15T13:30:15.000Z","dependencies_parsed_at":"2023-03-05T21:45:40.098Z","dependency_job_id":null,"html_url":"https://github.com/danielhaim1/image-classifier","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielhaim1%2Fimage-classifier","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielhaim1%2Fimage-classifier/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielhaim1%2Fimage-classifier/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielhaim1%2Fimage-classifier/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/danielhaim1","download_url":"https://codeload.github.com/danielhaim1/image-classifier/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250285717,"owners_count":21405297,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-06T08:08:10.082Z","updated_at":"2025-04-22T17:11:05.509Z","avatar_url":"https://github.com/danielhaim1.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Image Classifier\nThe function converts an array of images and adds the format and size to the class attribute for each image, which is useful for styling images based on their format and size.\n\n## Formats\nThe format of the image is added to the class attribute as `img-[format]` and `img-[size]`.\n\nFormats: `landscape`, `portrait`, `square`\n\n## Size\n\nThe image dimensions are determined by the natural dimensions of the image and converted to a human-readable size to be used for styling purposes.\n\nThe size is derived from the pixel size of the image, not the file size.\n\nSizes: `small`, `medium`, `large`\n\n## Output:\n```html\n\u003cimg src=\"image.jpg\" class=\"img-landscape img-large\" /\u003e\n\u003cimg src=\"image.jpg\" class=\"img-portrait img-medium\" /\u003e\n\u003cimg src=\"image.jpg\" class=\"img-square img-small\" /\u003e\n```\n\n## Methods\n```js\nclassifyImages(document.querySelectorAll('img'));\n```\n\n```js\ndocument.addEventListener('DOMContentLoaded', () =\u003e {\n    const images = document.querySelectorAll('img');\n    classifyImages(images);\n});\n```\n\n```js\nwindow.addEventListener('load', () =\u003e {\n    const images = document.querySelectorAll('img');\n    classifyImages(images);\n}\n```\n\n\n## Functions\n\n```js\n/**\n * Return the natural dimensions of an image.\n * @string img - The image to get the dimensions of.\n * @return {object} - The natural width of the image.\n * @return {null} - If the image has no natural dimensions.\n */\n\n function getNaturalDimensions({ naturalWidth, naturalHeight }) {\n    // get the image format from the src attribute.\n    let width = naturalWidth;\n    let height = naturalHeight;\n\n    if (width \u0026\u0026 height) {\n        // return the natural width and height of the image.\n        return { width, height };\n    } else {\n        // return null if the image has no natural dimensions.\n        return { width: null, height: null };\n    }\n}\n```\n\n```js\n/**\n * Return the format of an image.\n * @string img - The image to get the format of.\n * @return {string} - The format of the image.\n * @return {null} - If the image has no format.\n */\n\nfunction getImageFormat(img) {\n    // get the image format from the src attribute.\n    const { width, height } = getNaturalDimensions(img);\n\n    if (width \u0026\u0026 height) {\n        if (width \u003e height) {\n            // return landscape if the width is greater than the height.\n            return 'landscape';\n        } else if (width \u003c height) {\n            // return portrait if width is less than height\n            return 'portrait';\n        } else if (width === height) {\n            // return square if width and height are equal\n            return 'square';\n        } else {\n            // return null if the image has no format.\n            return null;\n        }\n    }\n\n    return null;\n}\n```\n\n```js\n/**\n * Return the size of the image in human readable format.\n * @string img - The image to get the size of.\n * @return {string} - The size of the image in human readable format.\n * @return {null} - If the image has no size.\n */\n\nfunction getImageSize(img) {\n    // get the natural dimensions of the image.\n    const { width, height } = getNaturalDimensions(img);\n\n    if (width \u0026\u0026 height) {\n        if (width \u003e 1200 || height \u003e 1200) {\n            // return large if the width or height is greater than 1200px.\n            return 'large';\n        } else if (width \u003e 600 || height \u003e 600) {\n            // return medium if the width or height is greater than 600px.\n            return 'medium';\n        } else if (width \u003e 300 || height \u003e 300) {\n            // return small if the width or height is greater than 300px.\n            return 'small';\n        } else {\n            return null;\n        }\n    } else {\n        // return null if the image has no size.\n        return null;\n    }\n}\n```\n\n```js\n/**\n * Return both format and size of an image.\n * @string img - The image to get the format and size of.\n * @return {object} - The format and size of the image.\n * @return {null} - If the image has no format or size.\n */\n\nfunction classifyImage(img) {\n    // get the image format and size.\n    const format = getImageFormat(img);\n    const size = getImageSize(img);\n\n    if (format \u0026\u0026 size) {\n        // return the format and size of the image.\n        return { format, size };\n    } else {\n        // return null if the image has no format or size.\n        return null;\n    }\n}\n```\n\n```js\n/**\n * Add the format and size of an image to the class attribute.\n * @string {images} - The images to add the format and size to.\n * @return {null} - If the images are not an array.\n*/\n\nfunction classifyImages(images) {\n    // check if the images are an array.\n    if (Array.isArray(images)) {\n        // loop through each image.\n        images.forEach(img =\u003e {\n            // get the image format and size.\n            const { format, size } = classifyImage(img);\n\n            // add the format and size to the class attribute.\n            img.classList.add(`img-${format}`);\n            img.classList.add(`img-${size}`);\n        });\n    } else {\n        return null;\n    }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanielhaim1%2Fimage-classifier","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdanielhaim1%2Fimage-classifier","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanielhaim1%2Fimage-classifier/lists"}