Расшифровка изображений с помощью JavaScript в браузере

У меня есть веб-приложение, которое требует, чтобы изображения были зашифрованы перед отправкой на сервер и расшифрованы после загрузки в браузер с сервера, когда правильный ключ был предоставлен Пользователь.

[Edit: Цель состоит в том, чтобы исходное изображение и ключ никогда не покидали компьютер пользователя, чтобы он / она не доверяли серверу.]

Моим первым подходом было зашифровать пиксели изображения с помощью AES и не трогайте заголовки изображений. Мне пришлось сохранить зашифрованное изображение в формате без потерь, таком как png. Формат с потерями, такой как jpg, изменит зашифрованные биты AES и сделает их невозможным для дешифрования.

Теперь зашифрованные изображения можно загружать в браузер с ожидаемым полностью зашифрованным видом. Здесь у меня есть код JavaScript для чтения данных изображения в виде пикселей RGB с использованием Image.canvas.getContext ("2d"). GetImageData () , получение ключа от пользователя, дешифрование пикселей с помощью AES, перерисовка холст и покажите пользователю расшифрованное изображение.

Этот подход работает, но имеет две основные проблемы.

Первая проблема заключается в том, что сохранение полностью зашифрованного изображения в формате без потерь занимает много байтов, около 3 байтов на пиксель.

Вторая проблема заключается в том, что расшифровка больших изображений в браузере занимает много времени.

Это вызывает второй подход, который заключается в шифровании заголовков изображений вместо фактических пикселей. Но я не нашел способа прочитать заголовки изображений в JavaScript, чтобы их расшифровать. Canvas предоставляет только уже распакованные пиксельные данные. Фактически, браузер показывает изображение с измененным заголовком как недопустимое.

Любые предложения по улучшению первого подхода или реализации второго подхода, или обеспечению других подходов приветствуются.

Простите за длинный пост.