Мне нужно выбрать часть html-страницы и получить координаты выделения , а не изображение - я хочу реализовать это как обрезку изображения (квадратная область выделения), как я могу это сделать?

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

0
hippout 26 Авг 2010 в 02:02

5 ответов

Лучший ответ

Установите некоторые обработчики событий мыши для целевого элемента (например, документ, таблица и т. Д.)

  • В mousedown создайте div с размером 0,0 в точке щелчка.
  • При перемещении мыши измените размер div, чтобы распространиться на новые координаты, используя исходные значения x, y из события mousedown в качестве источника
  • При наведении мыши делайте все, что вы хотите с координатами div («выделение»), которые вы только что создали.

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

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

1
Chris 25 Авг 2010 в 22:17

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

В этом случае, я думаю, вы ищете свойство css overflow, которое можно установить на «скрытый», чтобы отображать только часть, например, изображения.

Подробнее о overflow свойство.

1
bitmask 25 Авг 2010 в 22:12

Попробуйте плагин для панели инструментов веб-разработчика Firefox. Имеется опция, позволяющая просматривать координаты.

1
Holystream 25 Авг 2010 в 22:16

Это невозможно, если это не элемент canvas. Вам понадобится аддон на стороне клиента, чтобы сделать изображение для вас.

Если вы просто хотите получить координаты их выделения, вы можете наложить прозрачный элемент (холст или div) на всю страницу. Затем используйте события mousedown и mouseup, чтобы получить координаты мыши и при желании нарисуйте какой-нибудь прозрачный квадрат, чтобы они знали, что выбирают.

1
Cristian Sanchez 25 Авг 2010 в 22:12

Если я вас хорошо понял, то это мой путь Просто визуализируйте страницу в <div> (вы можете поместить ее либо непосредственно в html, либо через <iframe>), а затем установите для некоторого CSS <div> значение, похожее на {overflow: hidden; width: 100px; height: 70px}.

Чтобы управлять смещением, вам нужно вставить внутренний <div> и обернуть содержимое первого в него, а также установить значения css в нечто вроде {margin-left: -50px; margin-top: -40px;}, и все готово.

1
Omar Al-Ithawi 25 Авг 2010 в 22:17