Высокопроизводительный компрессор изображений, написанный на Rust и скомпилированный в WebAssembly для использования в браузере.
- 🚀 Высокая производительность - написан на Rust и скомпилирован в WASM
- 🎛️ Настраиваемое качество - от 1% до 100% качества сжатия
- 📦 Максимальное сжатие - автоматическое уменьшение размера и качества
- 🌐 Поддержка браузеров - работает во всех современных браузерах
- 📱 Поддержка форматов - JPEG, PNG, WebP, GIF, BMP и другие
- 🔧 Простой API - удобный JavaScript интерфейс
- 🎯 Сохранение формата - файл остается в исходном формате после сжатия
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 --devimport 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} байт`);const compressor = new ImageCompressor();Инициализирует WASM модуль.
Параметры:
wasmPath(string) - путь к скомпилированному WASM модулю
Возвращает: Promise
Сжимает изображение с заданным качеством, сохраняя исходный формат.
Параметры:
imageInput(File|Uint8Array) - файл изображения или массив байтовquality(number) - качество сжатия от 1 до 100
Возвращает: Promise - сжатые данные изображения в исходном формате
Поддерживаемые форматы:
- JPEG → JPEG (с настраиваемым качеством)
- PNG → PNG (с максимальным сжатием)
- WebP → JPEG (конвертация с настраиваемым качеством)
- GIF/BMP → PNG (конвертация)
Сжимает изображение с максимальным сжатием, уменьшая размер и качество.
Параметры:
imageInput(File|Uint8Array) - файл изображения или массив байтов
Возвращает: Promise - максимально сжатые данные
Особенности:
- Уменьшает размер изображения в 2 раза
- Использует минимальное качество для JPEG
- Сохраняет формат PNG без изменений
Получает информацию об изображении.
Параметры:
imageInput(File|Uint8Array) - файл изображения или массив байтов
Возвращает: Promise - объект с информацией:
{
width: number,
height: number,
format: string,
size_bytes: number
}Создает Blob из Uint8Array.
Параметры:
data(Uint8Array) - данные изображенияmimeType(string) - MIME тип (по умолчанию 'image/jpeg')
Возвращает: Blob
Создает URL для Blob.
Параметры:
blob(Blob) - Blob объект
Возвращает: string - URL
Освобождает URL объект.
Параметры:
url(string) - URL для освобождения
<!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>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 # Документация
Основной код находится в src/lib.rs:
ImageCompressor- основной класс для сжатияcompress_image_quick- быстрая функция сжатияcompress_image_max_quick- максимальное сжатиеget_image_info- получение информации об изображении
wasm-bindgen- для взаимодействия с JavaScriptimage- для работы с изображениямиserde- для сериализации данных
wasm-pack build --target web --out-dir pkg --devwasm-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