Изображение / Фоторедактор

Слайдер «До и после»

Создайте сравнение «до и после» с редактируемыми подписями и интерактивным слайдером. Скачайте переносимый HTML-файл с обоими изображениями, анимированный GIF с эффектом шторки или WebM, если браузер поддерживает этот формат.

Слайдер «До и после»: Использует пропорции изображения «до» и обрезает изображение «после» по центру, чтобы подогнать его под размер. В скачиваемом HTML-файле оба изображения PNG встроены как data URI, а также есть собственный ползунок диапазона с поддержкой клавиатуры. GIF-анимация с эффектом шторки помещается в область размером 480 на 480 пикселей; WebM записывается примерно в течение двух секунд, если браузер поддерживает запись. Работает на 100% локально в вашем браузере, файлы на сервер не загружаются.

Категория
Инструменты для изображений
Запуски
В вашем браузере
Стоимость
Бесплатно · без регистрации
Доступность
Готово к использованию
Ползунок «До и после»Локальная обработка

Полностью работает в браузере

Применяется к следующему растровому экспорту.
Выберите фото «До»

Нажмите, перетащите и отпустите или вставьте · данные остаются на этом устройстве

Выберите фото «После»

Нажмите, перетащите и отпустите или вставьте · данные остаются на этом устройстве

Фотография «до» задаёт пропорции, а фотография «после» обрезается по центру, чтобы соответствовать им. Статичные и HTML-изображения вписываются в область 1200 × 1200 pixels. GIF-переходы вписываются в область 480 × 480 pixels.

Экспорт HTML содержит изображения и код ползунка в одном файле. Откройте файл в браузере, чтобы перетаскивать ползунок или использовать клавиши со стрелками.

Сравнение в реальном времени

Выберите оба фото для сравнения.

Запись WebM недоступна в этом браузере. Вместо неё скачайте переход GIF.

Переносимое сравнение

Оба изображения приводятся к одинаковым пропорциям и встраиваются в HTML как URI данных PNG. Обычный ползунок диапазона управляет видимой областью изображения «после» и поддерживает клавиши со стрелками. Файл содержит встроенный JavaScript, который могут блокировать ограничительные политики хостинга.

Анимированный экспорт

Доступность WebM проверяется перед записью. GIF используется как запасной вариант, если WebM или захват canvas недоступны. Проверка поддержки MediaRecorder: https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/isTypeSupported_static

Как пользоваться

  1. Выберите фотографии «до» и «после».
  2. Добавьте подписи и переместите слайдер сравнения.
  3. Скачайте HTML для интерактивного слайдера, GIF или поддерживаемый WebM с анимацией шторки.

Конфиденциальность и ограничения

Ваши данные и изображения остаются в браузере. Ничего не загружается на сервер.

Похожие инструменты

Сравнение изображенийРамка для фотоИзменение размера изображений

Часто задаваемые вопросы

Работает ли HTML-файл без подключения к интернету?

Да. В одном файле содержатся оба изображения и код слайдера, внешние запросы не выполняются.

Почему WebM недоступен?

Браузер должен поддерживать запись WebM и захват canvas. Если эти функции недоступны, используйте GIF-анимацию с эффектом шторки.

Чем этот инструмент отличается от слайдера сравнения изображений?

Эта страница экспортирует рабочий HTML-слайдер и анимированные переходы-шторки. Слайдер сравнения изображений экспортирует статичное изображение PNG, в том числе в вариантах с расположением изображений рядом.

Бесплатный инструмент · запусков: в вашем браузере · аккаунт не нужен