🖼️ Image Compressor

Высокопроизводительный компрессор изображений, написанный на Rust и скомпилированный в WebAssembly для использования в браузере.

✨ Особенности

🚀 Высокая производительность - написан на Rust и скомпилирован в WASM
🎛️ Настраиваемое качество - от 1% до 100% качества сжатия
📦 Максимальное сжатие - автоматическое уменьшение размера и качества
🌐 Поддержка браузеров - работает во всех современных браузерах
📱 Поддержка форматов - JPEG, PNG, WebP, GIF, BMP и другие
🔧 Простой API - удобный JavaScript интерфейс
🎯 Сохранение формата - файл остается в исходном формате после сжатия

🛠️ Установка и сборка

Предварительные требования

Rust (последняя стабильная версия)
wasm-pack

Установка wasm-pack

curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh

Сборка проекта

# Клонируйте репозиторий
git clone <repository-url>
cd image-compressor

# Соберите WASM модуль
./build.sh

Или вручную:

wasm-pack build --target web --out-dir pkg --dev

📖 Использование

Базовое использование

import ImageCompressor from './js/image-compressor.js';

// Инициализация
const compressor = new ImageCompressor();
await compressor.init('./pkg/image_compressor.js');

// Сжатие изображения с качеством 80%
const compressedData = await compressor.compressImage(file, 80);

// Максимальное сжатие
const maxCompressedData = await compressor.compressImageMax(file);

// Создание Blob для скачивания
const blob = compressor.createBlob(compressedData);
const url = compressor.createObjectURL(blob);

Работа с файлами

// Загрузка файла через input
const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];

// Сжатие
const compressedData = await compressor.compressImage(file, 70);

// Скачивание результата
const blob = compressor.createBlob(compressedData);
const downloadUrl = compressor.createObjectURL(blob);

const a = document.createElement('a');
a.href = downloadUrl;
a.download = 'compressed-image.jpg';
a.click();

// Освобождение памяти
compressor.revokeObjectURL(downloadUrl);

Получение информации об изображении

const info = await compressor.getImageInfo(file);
console.log(`Размер: ${info.width}x${info.height}`);
console.log(`Размер файла: ${info.size_bytes} байт`);

🎯 API Reference

ImageCompressor

Конструктор

const compressor = new ImageCompressor();

Методы

`init(wasmPath)`

Инициализирует WASM модуль.

Параметры:

wasmPath (string) - путь к скомпилированному WASM модулю

Возвращает: Promise

`compressImage(imageInput, quality)`

Сжимает изображение с заданным качеством, сохраняя исходный формат.

Параметры:

imageInput (File|Uint8Array) - файл изображения или массив байтов
quality (number) - качество сжатия от 1 до 100

Возвращает: Promise - сжатые данные изображения в исходном формате

Поддерживаемые форматы:

JPEG → JPEG (с настраиваемым качеством)
PNG → PNG (с максимальным сжатием)
WebP → JPEG (конвертация с настраиваемым качеством)
GIF/BMP → PNG (конвертация)

`compressImageMax(imageInput)`

Сжимает изображение с максимальным сжатием, уменьшая размер и качество.

Параметры:

imageInput (File|Uint8Array) - файл изображения или массив байтов

Возвращает: Promise - максимально сжатые данные

Особенности:

Уменьшает размер изображения в 2 раза
Использует минимальное качество для JPEG
Сохраняет формат PNG без изменений

`getImageInfo(imageInput)`

Получает информацию об изображении.

Параметры:

imageInput (File|Uint8Array) - файл изображения или массив байтов

Возвращает: Promise - объект с информацией:

{
  width: number,
  height: number,
  format: string,
  size_bytes: number
}

`createBlob(data, mimeType)`

Создает Blob из Uint8Array.

Параметры:

data (Uint8Array) - данные изображения
mimeType (string) - MIME тип (по умолчанию 'image/jpeg')

Возвращает: Blob

`createObjectURL(blob)`

Создает URL для Blob.

Параметры:

blob (Blob) - Blob объект

Возвращает: string - URL

`revokeObjectURL(url)`

Освобождает URL объект.

Параметры:

url (string) - URL для освобождения

🧪 Примеры

Пример 1: Простое сжатие

<!DOCTYPE html>
<html>
<head>
    <title>Image Compressor Example</title>
</head>
<body>
    <input type="file" id="fileInput" accept="image/*">
    <button onclick="compress()">Сжать</button>
    <img id="result" style="display:none;">

    <script type="module">
        import ImageCompressor from './js/image-compressor.js';

        let compressor;

        async function init() {
            compressor = new ImageCompressor();
            await compressor.init('./pkg/image_compressor.js');
        }

        window.compress = async function() {
            const file = document.getElementById('fileInput').files[0];
            if (!file) return;

            const compressedData = await compressor.compressImage(file, 60);
            const blob = compressor.createBlob(compressedData);
            const url = compressor.createObjectURL(blob);

            const img = document.getElementById('result');
            img.src = url;
            img.style.display = 'block';
        };

        init();
    </script>
</body>
</html>

Пример 2: Пакетное сжатие

async function compressMultiple(files, quality) {
    const results = [];
    
    for (const file of files) {
        try {
            const compressedData = await compressor.compressImage(file, quality);
            const blob = compressor.createBlob(compressedData);
            results.push({
                original: file,
                compressed: blob,
                compressionRatio: (1 - compressedData.length / file.size) * 100
            });
        } catch (error) {
            console.error(`Ошибка сжатия ${file.name}:`, error);
        }
    }
    
    return results;
}

🏗️ Архитектура

image-compressor/
├── src/
│   └── lib.rs              # Основной Rust код
├── js/
│   └── image-compressor.js # JavaScript обертка
├── example/
│   └── index.html          # Демо приложение
├── pkg/                    # Скомпилированные WASM файлы
├── Cargo.toml              # Rust зависимости
├── build.sh                # Скрипт сборки
└── README.md               # Документация

🔧 Разработка

Структура Rust кода

Основной код находится в src/lib.rs:

ImageCompressor - основной класс для сжатия
compress_image_quick - быстрая функция сжатия
compress_image_max_quick - максимальное сжатие
get_image_info - получение информации об изображении

Зависимости

wasm-bindgen - для взаимодействия с JavaScript
image - для работы с изображениями
serde - для сериализации данных

Сборка для разработки

wasm-pack build --target web --out-dir pkg --dev

Сборка для продакшена

wasm-pack build --target web --out-dir pkg --release

📊 Производительность

Скорость сжатия: ~10-50ms для изображений до 5MB
Сжатие: 60-90% уменьшение размера при качестве 80%
Поддерживаемые форматы: JPEG, PNG, WebP, BMP, GIF
Максимальный размер: ограничен памятью браузера

🐛 Отладка

Включите логи в консоли браузера для отладки:

// Включить подробные логи
localStorage.setItem('debug', 'image-compressor');

📄 Лицензия

MIT License - см. файл LICENSE для деталей.

🤝 Вклад в проект

Форкните репозиторий
Создайте ветку для новой функции
Внесите изменения
Добавьте тесты
Создайте Pull Request

📞 Поддержка

Если у вас есть вопросы или проблемы:

Проверьте Issues
Создайте новый Issue с подробным описанием
Приложите пример кода и информацию о браузере

Сделано с ❤️ на Rust и WebAssembly

Name		Name	Last commit message	Last commit date
Latest commit History 2 Commits
example		example
js		js
src		src
tests		tests
.gitignore		.gitignore
CHANGELOG.md		CHANGELOG.md
Cargo.toml		Cargo.toml
README.md		README.md
USAGE.md		USAGE.md
build.sh		build.sh
package-lock.json		package-lock.json
package.json		package.json
wasm-pack.toml		wasm-pack.toml

archik408/image-compressor

Folders and files

Latest commit

History

Repository files navigation

🖼️ Image Compressor

✨ Особенности

🛠️ Установка и сборка

Предварительные требования

Установка wasm-pack

Сборка проекта

📖 Использование

Базовое использование

Работа с файлами

Получение информации об изображении

🎯 API Reference

ImageCompressor

Конструктор

Методы

init(wasmPath)

compressImage(imageInput, quality)

compressImageMax(imageInput)

getImageInfo(imageInput)

createBlob(data, mimeType)

createObjectURL(blob)

revokeObjectURL(url)

🧪 Примеры

Пример 1: Простое сжатие

Пример 2: Пакетное сжатие

🏗️ Архитектура

🔧 Разработка

Структура Rust кода

Зависимости

Сборка для разработки

Сборка для продакшена

📊 Производительность

🐛 Отладка

📄 Лицензия

🤝 Вклад в проект

📞 Поддержка

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

`init(wasmPath)`

`compressImage(imageInput, quality)`

`compressImageMax(imageInput)`

`getImageInfo(imageInput)`

`createBlob(data, mimeType)`

`createObjectURL(blob)`

`revokeObjectURL(url)`

Packages