Вопрос:
Мне нужно выбрать часть html-страницы и получить координаты выбора, а не изображение. Я хочу реализовать это как обрезку изображения (квадратная область выделения), как я могу это сделать?
более подробно я хочу следующее:
в браузере на странице html я нажимаю кнопку, тогда вся страница отключена и становится темным цветом, но маленькое окно отображается в реальном цвете страницы, я могу манипулировать этим окном: сделать его больше или меньше – в результате мне нужны координаты этого окна.
Лучший ответ:
Настройте некоторые обработчики событий мыши на целевом элементе (например, документ, таблицу и т.д.)
- В mousedown создайте div с размером 0,0 в точке щелчка.
- В mousemove измените размер div, чтобы перейти к новым координатам, используя исходный x, y из события mousedown в качестве источника
- В режиме мыши сделайте все, что хотите, с координатами div ( “выбор” ), которые вы только что создали.
Вы можете использовать класс css на этом оверлейном div, чтобы дать ему пунктирную или пунктирную границу, чтобы она имитировала окна выбора OS.
Изменить: это позволяет вам указывать координаты выбора. Если вы действительно хотите очистить обрезанное изображение страницы html, поскольку оно отображается на пользовательском компьютере, для этого вам понадобится какой-то плагин для браузера клиента.
Ответ №1
Это невозможно, если только элемент холста. Вам понадобится клиентский аддон для рендеринга изображения для вас.
Если вам просто нужны координаты их выбора, вы можете наложить прозрачный элемент (холст или div) на всю страницу. Затем используйте события mousedown и mouseup, чтобы зафиксировать координаты мыши и, необязательно, нарисовать какой-то прозрачный квадрат, чтобы они знали что они выбирают.
Ответ №2
Я не совсем уверен, чего вы хотите достичь, но, возможно, вы пытаетесь отобразить только часть большей части своей страницы.
В этом случае, я думаю, вы ищете свойство css overflow, которое может быть установлено как “скрытое”, чтобы отображать только часть, например, изображения.
Дополнительная информация о свойстве overflow.
Ответ №3
Попробуйте подключить плагин Firefox Web Developer Toolbar. У него есть опция, позволяющая просматривать координаты.
Ответ №4
Если я хорошо тебя понял, тогда это мой путь:
Просто отрисуйте страницу в <div> (вы можете поместить ее непосредственно в html или через <iframe>), а затем установите для некоторого css значение <div> примерно как {overflow: hidden; width: 100px; height: 70px}.
Чтобы управлять смещением, вам нужно вставить внутренний <div> и обернуть содержимое первого в нем и установить значения css на что-то вроде {margin-left: -50px; margin-top: -40px;}, и все готово.
