отображение изображения в соответствии с координатами, необходимыми в HTML - PullRequest
0 голосов
/ 24 марта 2012

У меня есть один виджет обрезки изображения, который дает мне координаты x1 y1 и x2 y2, которые обрезал пользователь.Теперь мое требование состоит в том, чтобы поместить эту обрезанную координату в какую-то другую html-страницу.

Вот мой код

Моя ширина и высота отображаемого окна составляет 200px 200px.Я хочу поместить обрезанную координату в это окно размером 200 * 200 пикселей.

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

Как этого добиться

Спасибо.


Прошу прощения, когда написал «Вот мой код», и я что-нибудь написал.

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

Теперь я знаю,координаты фактически того, что выбрал пользователь, я имею в виду, у меня есть x1, y1, x2, y2.и у меня есть полное изображение, загруженное пользователем.

Теперь мне нужно показать пользователю только то изображение, которое пользователь обрезал в кадре 200px * 200 px.

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

Спасибо

1 Ответ

0 голосов
/ 02 мая 2012

Я сделал это некоторое время назад.Я придумал следующее:

у вас есть div 200x200 с позицией: относительный и переполнение: скрытый, и пусть он содержит тег img с позицией: абсолютный, атрибут src пользовательского изображения, а также ширину и высоту в масштабе:

width = user_image_width * 200 / (x2 - x1)
height = user_image_height * 200 / (y2 - y1)

, тогда вам нужно соответственно установить left и top:

left = -x1 * 200 / (x2 - x1)
top = -y1 * 200 / (y2 - y1)

Если вы установили соответствующие свойства css элемента img (а я не ошибся), он долженпоказать только выбранный раздел, заполняющий все 200x200 дел.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...