Сложные способы: Canvas (скажем FabricJS) или SVG (SnapSVG).
С этими либами принцип просто. Создаём rect в него помещаем (типа заливка) изображение и накидываем на rect возможность смены длин сторон, путём перетаскивания. На сайтах есть примеры реализации для данных библиотек. Плюсом далее сможете нарастить функционал использую те же либы.
Есть еще один вариант, но это не точно :)
В правый верхний угол картинки помещаем какой-нибудь индикатор для отображения возможности его потянуть. На него вешаем событие mousedown (запоминаем координаты курсора) и пока не сработал mouseup следим за положением курсора (его отклонением от изначальных координат).
trackCursorPosition: function () {
$window.document.onmousemove = function (e: MouseEvent) {
vm.cursorX = e.pageX;
vm.cursorY = e.pageY;
};
}
getCursorPosition: function () {
return {
x: vm.cursorX,
y: vm.cursorY
};
}
Ну и при каждом mousemove высчитываем разницу между стартовыми координатами и текущими и соот. меняем размер изображения. Это конечно костыль и возможно его придется изменить. Но как вариант.
