Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.07.2020, 08:49
Новичок на форуме
Отправить личное сообщение для headrush Посмотреть профиль Найти все сообщения от headrush
 
Регистрация: 12.06.2013
Сообщений: 9

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

Есть изображение, на нём изображен объект. Известны размеры изображения и прямоугольная область объекта (левый верхний угол + ширина и высота). Задача состоит в том, чтобы отобразить объект изображения (минимизируя лишнее) в контейнере с произвольными размерами. Пробовал через канвас и через background на диве, слишком много получается расчетов и я в них тону.

Алгоритм такой: нужно изображение, масштабировать так, чтобы область с объектом на изображении влезла в контейнер/дисплей по центру.

Ну то есть это как:
{
background-size: cover;
background-position: center center;
}
только с применением не ко всему изображению, а к определенной области + без обрезки остатков.

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

По сути, если допустим делать через background, то мне нужно вычислить background-size в % (для width или height в зависимости от ситуации) и background-position (смещение по X и Y, чтобы центрировать объект)

Еще ситуация может усложняться тем, что объект на изображении может располагаться не по центру а ближе к какому-то краю, и тогда нужно центрировать так, чтобы не появлялись белые пробелы в контейнере, не смотря на то что сам объект будет не по-центру.
Ответить с цитированием
  #2 (permalink)  
Старый 18.07.2020, 08:55
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,649

Сообщение от headrush
Пробовал искать, чтобы не велосипедить - не нашел.
Плохо искали, уйма такого в сети - crop image js
Ответить с цитированием
  #3 (permalink)  
Старый 19.07.2020, 06:35
Новичок на форуме
Отправить личное сообщение для headrush Посмотреть профиль Найти все сообщения от headrush
 
Регистрация: 12.06.2013
Сообщений: 9

Сообщение от laimas Посмотреть сообщение
Плохо искали, уйма такого в сети - crop image js
Ну это не совсем то. Мне же нужно не обрезать картинку... или вернее я не знаю как вычислить область для вырезки.
Ответить с цитированием
  #4 (permalink)  
Старый 19.07.2020, 10:02
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,649

Сообщение от headrush
я не знаю как вычислить область для вырезки
А это уже интрига. О чем речь, искусственном интеллекте, который уже имеет чувства меры, прекрасного, знаний в различных областях, и который таки определит какое место и какого размера есть лакомый кусочек на изображении?
Ответить с цитированием
  #5 (permalink)  
Старый 19.07.2020, 11:24
Аватар для Alexandroppolus
Профессор
Отправить личное сообщение для Alexandroppolus Посмотреть профиль Найти все сообщения от Alexandroppolus
 
Регистрация: 25.10.2016
Сообщений: 782

Правильно ли я понял суть задачи?
Есть url и размеры картинки, прямоугольник кропа, размеры некоего div.
Надо вычислить background-size и background-position, так чтобы если указать url в background-image, то кроп (зеленый) размещался примерно как на картинке, а по бокам (красное) - та часть изображения, которая за пределами кропа, но тем не менее видна в силу несовпадения пропорций?
Изображения:
Тип файла: png drawityImage.png (2.3 Кб, 1 просмотров)
Ответить с цитированием
  #6 (permalink)  
Старый 20.07.2020, 05:43
Новичок на форуме
Отправить личное сообщение для headrush Посмотреть профиль Найти все сообщения от headrush
 
Регистрация: 12.06.2013
Сообщений: 9

Сообщение от Alexandroppolus Посмотреть сообщение
Правильно ли я понял суть задачи?
Есть url и размеры картинки, прямоугольник кропа, размеры некоего div.
Надо вычислить background-size и background-position, так чтобы если указать url в background-image, то кроп (зеленый) размещался примерно как на картинке, а по бокам (красное) - та часть изображения, которая за пределами кропа, но тем не менее видна в силу несовпадения пропорций?
Да. И это (красное) может быть как по-горизонтали, так и по-вертикали. в зависимости от пропорций дива. То есть это кроп, но только не по моим размерам, а больше, чтобы заполнить div.
Ответить с цитированием
  #7 (permalink)  
Старый 20.07.2020, 05:48
Новичок на форуме
Отправить личное сообщение для headrush Посмотреть профиль Найти все сообщения от headrush
 
Регистрация: 12.06.2013
Сообщений: 9

Сообщение от laimas Посмотреть сообщение
А это уже интрига. О чем речь, искусственном интеллекте, который уже имеет чувства меры, прекрасного, знаний в различных областях, и который таки определит какое место и какого размера есть лакомый кусочек на изображении?
Там ИИ не нужен. Как я писал уже, объект на картинке выделен, просто нужно немного подкорректировать его размеры, чтобы он вошел в контейнер (область отображения). Если делать тупой кроп, то будут появляться белые поля.
Ответить с цитированием
  #8 (permalink)  
Старый 20.07.2020, 05:58
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,649

headrush,
не вгоняю я тогда, что такое "объект на изображении", который "может располагаться не по центру", но который "нужно центрировать".
Ответить с цитированием
  #9 (permalink)  
Старый 20.07.2020, 06:16
Новичок на форуме
Отправить личное сообщение для headrush Посмотреть профиль Найти все сообщения от headrush
 
Регистрация: 12.06.2013
Сообщений: 9

Вот пример. Я подогнал цифры руками. А нужно их вычислить исходя из размеров области-объекта на изображении (оно известно заранее), и контейнера в котором отображается картинка.
https://jsfiddle.net/headrush/2a1v9d6x/19/
Ответить с цитированием
  #10 (permalink)  
Старый 20.07.2020, 06:19
Новичок на форуме
Отправить личное сообщение для headrush Посмотреть профиль Найти все сообщения от headrush
 
Регистрация: 12.06.2013
Сообщений: 9

Сообщение от laimas Посмотреть сообщение
headrush,
не вгоняю я тогда, что такое "объект на изображении", который "может располагаться не по центру", но который "нужно центрировать".
На последнем примере, откройте исходник изображения, там подснежник это объект изображения и он расположен не по-центру. То есть при его масштабировании и подгонке под контейнер, может так получиться что поле слева будет меньше чем поле справа. То есть объект будет не по центру див-контейнера. Но это будет лучше чем если бы он был по-центру и с белыми полями.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Реализация сборки пазла с использованием Drag'N'Drop (чистый JavaScript) nightofpromises Элементы интерфейса 1 16.03.2019 08:54
Изменение рабочей области изображения pagemaster Общие вопросы Javascript 19 15.04.2013 17:06
Расчет реальных размеров изображения в галерее Vision Элементы интерфейса 7 10.07.2012 20:56
Проблема: Jquery - эффект раскрытия LightBox для изображения. woody2 jQuery 0 15.09.2011 23:10
Получение высоты изображения theo_ Javascript под браузер 2 21.06.2011 15:04