Редактирование изображений в вашем браузере

Все происходит на вашем устройстве

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

Этот редактор так не работает. Ваш браузер уже содержит полный конвейер изображений: он может декодировать JPEG, передать вам пиксели, позволить вам рисовать на них и закодировать новый файл. Этот инструмент представляет собой пользовательский интерфейс над этим конвейером. Изображение считывается с вашего диска в память, редактируется в памяти и записывается обратно на диск.

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

Начало: пустой холст или существующее изображение.

Выберите ширину и высоту пустого холста или откройте PNG, JPEG или WebP на своем устройстве. Открытие изображения заменяет текущий документ, поэтому сначала экспортируйте все, что хотите.

Очень большие изображения уменьшаются автоматически, и инструмент сообщает вам об этом. Это не произвольное ограничение. Для фотографии размером 50 требуется около 200 MB необработанных пикселей на холсте, а вторая копия для вывода удваивает это значение. На телефоне превышение лимита не приводит к уловимой ошибке: браузер возвращает пустой холст или операционная система закрывает вкладку. Предварительное уменьшение изображения — это разница между работающим редактором и сбоем.

Рисование и почему сенсорное управление здесь работает правильно

Кисть, ластик, линия, прямоугольник, эллипс и текстовые инструменты работают одинаково с мышью, трекпадом, пальцем или стилусом, поскольку редактор слушает единые события указателя, а не отдельные обработчики мыши и касания.

Одна деталь делает сенсорное рисование удобным, а не разочаровывающим: холст заявляет, что обрабатывает свои собственные жесты, поэтому палец, проведенный по нему, рисует, а не прокручивает страницу. Редакторы, которые этого не делают, практически непригодны для использования на телефоне, потому что каждый штрих борется с браузером за контроль. Страница по-прежнему нормально прокручивается везде за пределами холста.

События указателя также появляются реже, чем обновляется экран, поэтому о быстром движении сообщается как о нескольких широко расположенных точках. Редактор заполняет промежутки между ними, поэтому быстрая линия получается сплошной, а не рядом точек.

Отменить, и память, которую это стоит

Каждый штрих, форма и преобразование — это один шаг отмены. Отмените и повторите работу с панели инструментов или с помощью обычных сочетаний клавиш.

История намеренно ограничена. На каждом шаге сохраняется копия измененных пикселей, причем на большом изображении размер каждого шага составляет десятки мегабайт. Неограниченная история — один из самых быстрых способов исчерпать память телефона, поэтому этот редактор ограничивает историю как по количеству шагов, так и по их общему размеру, сначала отбрасывая самые старые. Строка состояния показывает, сколько осталось на данный момент.

Это осознанный обмен: более мелкая история в обмен на редактора, который не умирает в середине сеанса.

Слои, намеренно сохраненные небольшими

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

Здесь представлена ​​небольшая растровая модель слоя, и она специально там остановилась. Режимы наложения, маски слоев, группы, корректирующие слои и неразрушающие преобразования не реализованы. Именно эти функции отличают инструмент для рисования от профессионального наборщика, и их полурабочая версия хуже, чем их честное отсутствие. На странице ограничений указано, чего именно не хватает.

Каждый слой содержит полноразмерное растровое изображение, поэтому затраты памяти на слои прямо пропорциональны их количеству. Шапка — двенадцать.

Экспорт

PNG не имеет потерь и сохраняет прозрачность: правильный выбор для рисунков, диаграмм и снимков экрана. JPEG намного меньше для фотографий, но не может сохранять прозрачность и немного теряет качество при каждом сохранении. WebP хорошо справляется с обеими задачами и создает файлы меньшего размера, чем JPEG, с сопоставимым качеством.

Если ваше изображение имеет прозрачные области и вы выбираете JPEG, редактор предупредит вас перед сохранением и заполнит прозрачность белым, а не позволит браузеру выбрать цвет, который иногда бывает черным.

Экспортированный файл создается на странице и сохраняется прямо в папке загрузок.

Вопросы

Ограничения

• Слои являются только растровыми: никаких режимов наложения, масок, групп, корректирующих слоев или неразрушающих преобразований.
• Большие изображения уменьшаются в соответствии с ограничениями холста устройства, поэтому редактор не подходит для работы с очень большими фотографиями в полном разрешении.
• История отмены ограничена размером и количеством шагов, поэтому в длительном сеансе не будет сохраняться каждый шаг.
• Между сеансами ничего не сохраняется. При закрытии вкладки документ удаляется.
• Нет поддержки RAW, HEIC, TIFF, GIF или SVG: редактор обрабатывает только PNG, JPEG и WebP.
• Нет управления цветом. Изображения обрабатываются в цветовом пространстве браузера по умолчанию, поэтому встроенный профиль ICC может не сохраниться.