Очевидно, что есть куча javascript для управления изменением размера перетаскивания окна обрезки, которое может быть немного сложным (или, по крайней мере, утомительным), если вы применяете определенное соотношение сторон (или диапазон), но насколькоЧто касается HTML, то это просто черный фоновый div с полным изображением, расположенным поверх него в opacity: .5
(это создало затемненное фоновое изображение), затем еще одна копия того же изображения, расположенная в position: absolute
div (который находится снаружиэтого первого div), поэтому он корректно совпадает с первым изображением.Обработчик, который реагирует на события перетаскивания маркеров изменения размера, постоянно обновляет свойства top
, left
, width
и height
абсолютно позиционированного div («окна обрезки»), а также top
и left
свойств (в отрицательном направлении) изображения «переднего плана» внутри него, чтобы оно было выровнено с фоновым изображением.
JavaScript также будет отслеживать положение каждого угла, поэтому, когда пользовательПринимая изменения, эти точки могут быть переведены в пиксельные координаты (с учетом любого масштабирования) и переданы в любую библиотеку обработки изображений, находящуюся на серверной стороне.