shenjianZ/tools
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
shenjianZ
2025-05-24 22:25:49 +08:00
commit bcdeef8892
150 changed files with 9734 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
media-tools/image-converter/docs/ATTRIBUTIONS.md Normal file
View File

@@ -0,0 +1,39 @@
# Attributions
MAZANOKE would not be possible without the projects listed here.
### Browser Image Compression
- **Author:** Donald Chan
- **License**: [MIT License](https://github.com/Donaldcwl/browser-image-compression/blob/master/LICENSE)
- **Source**: https://github.com/Donaldcwl/browser-image-compression
- **Version**: v2.0.2
- **Usage**: Image compression
### heic-to
- **Author:** Hopper Gee
- **License**: [GNU Lesser General Public License v3.0](https://www.npmjs.com/package/heic-to)
- Built on top of [libheif](https://github.com/strukturag/libheif) ([LGPL](https://github.com/strukturag/libheif?tab=License-1-ov-file)), [libde265](https://github.com/strukturag/libde265) ([GPLv3](https://github.com/strukturag/libde265?tab=License-1-ov-file#readme))
- **Source**: https://github.com/hoppergee/heic-to
- **Version**: v1.1.12
- **Usage**: Decoding HEIC file types.
### JSZip
- **Author:** Stuart Knightley
- **License**: [GNU General Public License v3.0](https://github.com/Stuk/jszip/blob/main/LICENSE.markdown)
- **Source**: https://github.com/Stuk/jszip
- **Version**: v3.10.1
- **Usage**: Zip files
### Geist, Geist Mono
- **Author:** Vercel
- **License**: [OFL License](https://github.com/vercel/geist-font/blob/main/LICENSE.txt)
- **Source**: https://github.com/vercel/geist-font
- **Source**: https://vercel.com/geist/icons
- **Version**: 1.1
- **Usage**: Fonts, icons
### Coolicons Line Oval Icons
- **Author:** krystonschwarze
- **License**: [CC Attribution License](https://www.svgrepo.com/page/licensing/#CC%20Attribution)
- **Source**: https://www.svgrepo.com/collection/coolicons-line-oval-icons/
- **Usage**: Icons

61
media-tools/image-converter/docs/install-web-app.md Normal file
View File

@@ -0,0 +1,61 @@
# Install MAZANOKE as Web App
MAZANOKE can be installed as a Progressive Web App (PWA), letting you use it like a native app on your device.
Visit [MAZANOKE.com](https://mazanoke.com) and click the "Install" button in the top-right corner. This button appears when MAZANOKE detects browser support for PWA.
**If you don’t see the "Install" button, you can still manually install MAZANOKE in just a few simple clicks**, see how in the section "[Manual install](#manual-install)".
<img src="../.github/images/install-web-app/capture-install-pwa-button.png" alt="Install MAZANOKE progressive web app button" height="100">
## Manual Install
Instructions are provided for all major browsers, but the steps are similar for derivative browsers. As of writing, the desktop version of Firefox does not natively support PWA.
**Desktop**
- [Chrome](#chrome-desktop)
- [Safari](#safari-desktop)
**Mobile**
- [Firefox](#firefox-mobile)
- [Chrome](#chrome-mobile)
- [Safari](#safari-mobile)
### Chrome (Desktop)
1. Click the three-dot icon to open the more menu.
1. Move the cursor to hover "Cast, save, and share".
1. Click "Install page as app".
1. A prompt will show up, click "Install".
<img src="../.github/images/install-web-app/install-pwa-chrome-desktop.jpg" alt="Install MAZANOKE progressive web app on Chrome desktop" width="1200">
### Safari (Desktop)
1. Click and open the share sheet.
1. Click "Add to Dock".
1. A prompt will show up, click "Add".
<img src="../.github/images/install-web-app/install-pwa-safari-desktop.jpg" alt="Install MAZANOKE progressive web app on Safari desktop" width="1200">
### Firefox (Mobile)
1. Tap the three-dot icon to open the more menu.
1. Tap "Add App to Home Screen".
1. A prompt will show up, tap "Add".
<img src="../.github/images/install-web-app/install-pwa-firefox-mobile.jpg" alt="Install MAZANOKE progressive web app on Firefox mobile" width="1200">
### Chrome (Mobile)
1. Tap the three-dot icon to open the more menu.
1. Tap "Add to Home screen".
1. A prompt will show up, tap "Install".
<img src="../.github/images/install-web-app/install-pwa-chrome-mobile.jpg" alt="Install MAZANOKE progressive web app on Chrome mobile" width="1200">
### Safari (Mobile)
1. Tap and open the share sheet.
1. Tap "Add to Home Screen".
1. A prompt will show up, tap "Add".
<img src="../.github/images/install-web-app/install-pwa-safari-mobile.jpg" alt="Install MAZANOKE progressive web app on Safari mobile" width="1200">

62
media-tools/image-converter/docs/project-structure.md Normal file
View File

@@ -0,0 +1,62 @@
# Project Structure
An outline of the project structure.
- [Directories and Files Outline](#directories-and-files-outline)
- [Basic App Flow](#basic-app-flow)
## Directories and files outline
| **File** | **Description** |
|------------------------------------|---------------------------------------------------------------------------------|
| **Root** | |
| `index.html` | Main HTML file that loads the app. |
| `service-worker.js` | Service worker for offline and PWA support. |
| `manifest.json` | Manifest for PWA configuration. |
| | |
| **JavaScript (`assets/js`)** | Core functionality of the app. |
| `compression.js` | Handles the image compression logic. |
| `download.js` | Handles the download logic of the compressed images. |
| `events.js` | Event listeners and handlers. |
| `global.js` | Initializes global variables such as references to elements, form, states, etc. |
| `helpers.js` | Helper functions. |
| `ui.js` | User interface DOM manipulation. |
| `utilities.js` | Utility functions for various tasks and smaller types of processing. |
| | |
| **Vendor Libraries (`assets/vendor`)** | Third-party libraries, essential to the app's functionality. |
| `browser-image-compress.js` | A library for browser-side image compression. |
| `heic-to.js` | HEIC image decoder, allowing converting to other browser-friendly file types. |
| `jszip.js` | Handles zipping of image files for download. |
| | |
| **Images (`assets/images`)** | Static images for user interface and metatags. |
| | |
| **CSS (`assets/css`)** | App styling. |
| `fonts.css` | Font definitions. |
| `style.css` | Main styling of the user interface. |
| `variables.css` | Global CSS variables for dynamic color, sizing, font, etc. |
| | |
| **Fonts (`assets/fonts`)** | Font files. |
## Basic App Flow
To better understand the app’s flow and file interactions, the outline below describes the general image optimization process.
1. `index.html` launches the app.
1. The scripts are loaded in a specific order to initialize global variables, references, and dependencies that other scripts depend on.
1. `vendor` scripts.
1. `global.js`
1. `utilities.js`
1. `helpers.js`
1. `ui.js`
1. `compression.js`
1. `download.js`
1. `events.js`
1. `initApp()` in `events.js` binds events to interactive components in `index.html` and handles saving/restoring app settings.
1. When a user drops or selects an image, event handlers in `events.js` capture the input and trigger compression functions from `compression.js`.
1. Before compressing any images, `ui.js` parses and validates the selected options. To do so, many features from `utilities.js` are used to build the `options` object that are passed to the image compressor.
1. Input images go through `preProcessImage(file)` in `compression.js` to be decoded, ensuring compatibility with `browser-image-compression.js`, which serves as the main image compressor library in this app.
- Image formats natively supported by browsers (JPG, PNG, WebP) typically don't need pre-processing and are passed through directly.
- HEIC images are pre-processed, as they are not natively supported by major browsers.
- AVIF is natively supported, but due to its already optimized nature, it is pre-processed to a lossy format to reduce the chance of the output file being larger than the original.
1. The state of the image processing, such as `isCompressing`, `compressQueue`, and more, are stored in `global.js`.
1. Once an image is processed, `handleCompressionResult(file, output)` in `helpers.js` outputs the compressed image on the user interface, where users can download individual images or all images as a zip, handled by `download.js`.

21
media-tools/image-converter/docs/updating-dependencies.md Normal file
View File

@@ -0,0 +1,21 @@
# Updating Dependencies
To maintain a simple and lightweight environment, the project primarily uses vanilla JavaScript and is light on third-party libraries, avoiding the need for a package manager.
To update the respective library, simply run a curl command from the project root folder to pull and replace with the latest version.
**`browser-image-compression.js`**:
```
curl -o assets/vendor/browser-image-compression.js https://raw.githubusercontent.com/Donaldcwl/browser-image-compression/refs/heads/master/dist/browser-image-compression.js
```
**`heic-to.js`**:
```
curl -o assets/vendor/heic-to.js https://raw.githubusercontent.com/hoppergee/heic-to/refs/heads/main/dist/iife/heic-to.js
```
**`jszip.js`**:
```
curl -o assets/vendor/jszip.js https://raw.githubusercontent.com/Stuk/jszip/refs/heads/main/dist/jszip.min.js
```