{"id":20271908,"url":"https://github.com/hoangsonww/image-video-tools","last_synced_at":"2025-04-11T04:32:43.291Z","repository":{"id":240452269,"uuid":"802672957","full_name":"hoangsonww/Image-Video-Tools","owner":"hoangsonww","description":"📸 Welcome to the Image \u0026 Video Tools: Your go-to suite for managing media! Effortlessly resize, crop, and edit images and videos with our versatile tools. Experience seamless media management with powerful, easy-to-use features—all in one place!","archived":false,"fork":false,"pushed_at":"2024-10-23T16:39:07.000Z","size":14525,"stargazers_count":19,"open_issues_count":2,"forks_count":14,"subscribers_count":11,"default_branch":"master","last_synced_at":"2024-10-23T21:58:57.627Z","etag":null,"topics":["image","image-converter","image-cropper","image-cropping","image-flip","image-processing","image-processing-python","image-resizer","image-watermarking","images","sound-remover","type-converter","video-audio-remover","watermark","web-development"],"latest_commit_sha":null,"homepage":"https://image-video-tools.onrender.com","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/hoangsonww.png","metadata":{"files":{"readme":".github/README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":".github/SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":null}},"created_at":"2024-05-19T00:07:13.000Z","updated_at":"2024-10-20T17:58:40.000Z","dependencies_parsed_at":"2024-05-19T01:25:12.202Z","dependency_job_id":"3aaed897-673c-497d-bbe7-e0c3fc54c922","html_url":"https://github.com/hoangsonww/Image-Video-Tools","commit_stats":null,"previous_names":["hoangsonww/image-video-tools"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoangsonww%2FImage-Video-Tools","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoangsonww%2FImage-Video-Tools/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoangsonww%2FImage-Video-Tools/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoangsonww%2FImage-Video-Tools/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hoangsonww","download_url":"https://codeload.github.com/hoangsonww/Image-Video-Tools/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248345202,"owners_count":21088231,"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":["image","image-converter","image-cropper","image-cropping","image-flip","image-processing","image-processing-python","image-resizer","image-watermarking","images","sound-remover","type-converter","video-audio-remover","watermark","web-development"],"created_at":"2024-11-14T12:39:58.511Z","updated_at":"2025-04-11T04:32:43.231Z","avatar_url":"https://github.com/hoangsonww.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Image \u0026 Video Tools: Unleash the Power of Media\n\n📸 Welcome to the Image \u0026 Video Tools application. This application provides a **lightweight** and **comprehensive** suite of tools for manipulating images and videos directly in your browser. Below you will find detailed instructions on how to use each tool and information on the available features.\n\nThis application is currently live [here](https://image-video-tools.onrender.com/). Let our tools transform your images \u0026 videos! 📸\n\n## Table of Contents\n\n1. [User Interface](#user-interface)\n2. [Introduction](#introduction)\n3. [Features](#features)\n    - [Image Resizer](#image-resizer)\n    - [Image Cropper](#image-cropper)\n    - [Image Rotator](#image-rotator)\n    - [Image Filters](#image-filters)\n    - [Image Converter](#image-converter)\n    - [Image Watermarker](#image-watermarker)\n    - [Image Background Remover](#image-background-remover)\n    - [Thumbnail Generator](#thumbnail-generator)\n    - [Sound Remover](#sound-remover)\n    - [Dark Mode](#dark-mode)\n4. [Installation](#installation)\n5. [Usage](#usage)\n    - [General Instructions](#general-instructions)\n    - [Tool-Specific Instructions](#tool-specific-instructions)\n6. [Test Status](#test-status)\n7. [Python Implementation](#python-implementation)\n8. [Contributing](#contributing)\n9. [License](#license)\n10. [Contact](#contact)\n\n## User Interface\n\n**Light mode:**\n\n\u003cp align=\"center\"\u003e\n   \u003ca href=\"https://hoangsonww.github.io/Image-Video-Tools/\"\u003e\n      \u003cimg src=\"../assets/UI.png\" alt=\"Image \u0026 Video Tools User Interface\" width=\"100%\" style=\"border-radius: 8px\"\u003e\n   \u003c/a\u003e\n\u003c/p\u003e\n\n**Dark mode:**\n\n\u003cp align=\"center\"\u003e\n   \u003ca href=\"https://hoangsonww.github.io/Image-Video-Tools/\"\u003e\n      \u003cimg src=\"../assets/ui-dark.png\" alt=\"Image \u0026 Video Tools User Interface (Dark Mode)\" width=\"100%\" style=\"border-radius: 8px\"\u003e\n   \u003c/a\u003e\n\u003c/p\u003e\n\n## Introduction\n\nThis web application offers a variety of tools for editing and manipulating images and videos. Each tool is designed to be user-friendly and efficient, providing a seamless experience for performing common media editing tasks.\n\n## Features\n\n### Image Resizer\n\nResize images to specific dimensions while optionally maintaining the aspect ratio.\n\n### Image Cropper\n\nCrop images by selecting a rectangular area. The area outside the selection is darkened for better visibility.\n\n### Image Rotator\n\nRotate images in 90-degree increments. The current rotation angle is displayed, and the user can download the rotated image.\n\n### Image Filters\n\nApply various filters to images such as grayscale, sepia, invert, brightness, contrast, blur, saturate, and hue-rotate.\n\n### Image Background Remover\n\nRemove the background from images using a pre-trained machine-learning model. The user can download the image with the background removed.\n\n### Image Converter\n\nConvert images between different formats such as PNG, JPEG, BMP, GIF, WEBP, and TIFF.\n\n### Image Watermarker\n\nAdd a text watermark to images with customizable text, font size, color, and position.\n\n### Thumbnail Generator\n\nGenerate 20 random thumbnails from a video or capture a thumbnail at a specific timestamp. Users can select and download their preferred thumbnail.\n\n### Sound Remover\n\nRemove audio from videos and download the silent version.\n\n### Dark Mode\n\nToggle between light and dark modes using a button with a moon icon. The user's preference is stored in local storage and applied on subsequent visits.\n\n## Installation\n\nTo install and run this application locally, follow these steps:\n\n1. Clone the repository:\n   ```bash\n   git clone https://github.com/hoangsonww/image-video-tools.git\n   ```\n\n2. Navigate to the project directory:\n   ```bash\n   cd image-video-tools\n   ```\n\n3. Open `index.html` in your preferred web browser.\n\n## Usage\n\n### General Instructions\n\n1. Open the application in your web browser.\n2. Use the navigation bar to select the desired tool.\n3. Follow the specific instructions for each tool as outlined below.\n\n### Tool-Specific Instructions\n\n#### Image Resizer\n\n1. Choose an image by clicking the \"Choose an image to resize\" input.\n2. Select the desired width and height. Check \"Maintain Aspect Ratio\" if you want to preserve the original aspect ratio.\n3. Click \"Resize Image\" to resize the image.\n4. View the live preview and download the resized image if needed.\n\n#### Image Cropper\n\n1. Choose an image by clicking the \"Choose an image to crop\" input.\n2. Drag to select the area to crop.\n3. Click \"Crop Image\" to crop the image.\n4. View the live preview and download the cropped image if needed.\n\n#### Image Rotator\n\n1. Choose an image by clicking the \"Choose an image to rotate\" input.\n2. Click \"Rotate Image\" to rotate the image by 90 degrees.\n3. Click \"Download Rotated Image\" to download the rotated image.\n\n#### Image Filters\n\n1. Choose an image by clicking the \"Choose an image to apply filters\" input.\n2. Select the desired filter from the list of buttons.\n3. View the live preview with the applied filter.\n4. Click \"Download Filtered Image\" to download the filtered image.\n\n#### Image Converter\n\n1. Choose an image by clicking the \"Choose an image to convert\" input.\n2. Select the desired format by clicking one of the \"Convert to...\" buttons.\n3. Click \"Download Converted Image\" to download the image in the selected format.\n\n#### Image Watermarker\n\n1. Choose an image by clicking the \"Choose an image to watermark\" input.\n2. Enter the watermark text.\n3. Adjust the font size, color, and position (X and Y coordinates) of the watermark.\n4. Click \"Add Watermark\" to apply the watermark.\n5. View the live preview and click \"Download Watermarked Image\" to download the watermarked image.\n\n#### Image Background Remover\n\n1. Choose an image by clicking the \"Choose an image to remove background\" input.\n2. Click \"Remove Background\" to process the image. It may take some time depending on the image size.\n3. Click \"Download Image\" to download the image with the background removed. See the power of machine learning in action!\n4. **Note:** This tool uses a pre-trained machine learning model to remove the background from images. This model may not be available during high-traffic times, so please be patient and try again later if needed.\n\n#### Thumbnail Generator\n\n1. Choose a video by clicking the \"Choose a video\" input.\n2. Click \"Generate 20 Thumbnails\" to generate random thumbnails.\n3. Enter a specific timestamp and click \"Capture Thumbnail\" to generate a thumbnail at that time.\n4. Select a preferred thumbnail from the preview section.\n5. Click \"Download Thumbnail\" to download the selected thumbnail.\n\n#### Sound Remover\n\n1. Choose a video by clicking the \"Choose a video to remove sound\" input.\n2. Click \"Remove Sound\" to process the video. It may take some time depending on the video length.\n3. Click \"Download Video\" to download the video without sound.\n\n### Dark Mode\n\n1. Click the moon icon button to toggle between light and dark modes.\n2. Your preference will be saved and applied on future visits.\n\n## Test Status\n\n[![Test Status](https://img.shields.io/badge/Test%20Status-Passing-brightgreen)](https://hoangsonww.github.io/Image-Video-Tools/)\n\n## Python Implementation\n\nThere are also Python implementations of some of the tools available in this application. You can find them in the `python` directory. The following tools are available:\n\n1. [Background Remover](../src/python/background_remover.py)\n2. [Image Resizer, Rotator, \u0026 Cropper](../src/python/image_tools.py)\n3. [Audio Remover](../src/python/remove_audio_from_video.py)\n4. [Thumbnail Generator](../src/python/thumbnail.py)\n\nFeel free to run these scripts locally on your machine to perform the desired tasks!\n\n## Contributing\n\nWe welcome contributions to improve this application. Please follow these steps:\n\n1. Fork the repository or clone it locally:\n   ```bash\n   git clone https://github.com/hoangsonww/Image-Video-Tools.git\n   ```\n2. Create a new branch:\n   ```bash\n   git checkout -b feature-branch\n   ```\n3. Make your changes and commit them:\n   ```bash\n   git commit -m \"Description of changes\"\n   ```\n4. Push to the branch:\n   ```bash\n   git push origin feature-branch\n   ```\n5. Open a pull request on GitHub if you would like to propose your changes.\n\n## License\n\nThis project is licensed under the MIT License. See the [LICENSE](../LICENSE) file for details. \n\n**NOTE: Direct copying of this project is not prohibited for any purpose.** \n\n## Contact\n\nIf you have any questions, feedback, or concerns, please feel free to [contact me](https://github.com/hoangsonww) or open an issue in this repository. I'll be happy to help!\n\n---\n\nCreated with ❤️ by [Son Nguyen](https://github.com/hoangsonww) in 2024. Thank you for visiting today! 🚀\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhoangsonww%2Fimage-video-tools","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhoangsonww%2Fimage-video-tools","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhoangsonww%2Fimage-video-tools/lists"}