1

I am familiar with a few web technologies, but currently was asked to find an easy solution for the task below - and I struggle to decide what approach to take. Is there an existing solution for this? Can this be done in javascript? Or does it require flash?

The user will be shown a photo and will have to select a rectangle within the photo (which will later be cropped). The selected rectangle must meet certain size/ration requirements. The actual cropping can easily be done by the server, but I wanted to ask for suggestions what would the best way be to tackle the front-end interface which would take the selected rectangle coordinates, possibly do basic calculations (check ratio etc) on them and upon approval send them to the server.

This is gives you an idea:

https://i.stack.imgur.com/Fp2H9m.png

No special mobile support needed - ie desktop browsers only.

Thanks a million,

FSG

bjb568
  • 11,089
  • 11
  • 50
  • 71
user3053493
  • 25
  • 4
  • You can do with canvas. Make a div look like the 'crop square' in the picture, make it resizable, draggable with jquery ui, get the current position (x,y) and size (width, height) and use yourContext.drawImage() with clipping to draw the cropped area – Marius Apr 11 '15 at 06:31

2 Answers2

1

A demo of the imgareaselect library: 

$(document).ready(function () {
    $('#pic').imgAreaSelect({
        handles: true
    });
});
img#pic{
  width:500px;
  margin:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://odyniec.net/projects/imgareaselect/jquery.imgareaselect.pack.js"></script>

<link rel="stylesheet" type="text/css"
        href="http://odyniec.net/projects/imgareaselect/css/imgareaselect-animated.css" />
<img id="pic" src="https://c4.staticflickr.com/4/3552/3360463235_8997ec6278_b.jpg" />
Gaël Barbin
  • 3,769
  • 3
  • 25
  • 52
  • What is the expected behaviour? For me, (L or R) clicking has no effect, dragging changes the cursor to a miniature copy of the image ... – Hagen von Eitzen May 04 '19 at 10:11
  • The location of libraries used may have changed. You can see the behavior of the library on its page: http://odyniec.net/projects/imgareaselect/ – Gaël Barbin May 05 '19 at 07:42
0

This is something that can be done in Javascript. The basic idea would be to process the mousedown/mousemove/mouseup events in the container for the image (restricting it to your aspect ratio requirements) and then process the cropping on the server.

Here's an example:

http://jsbin.com/zeneziwofe/1/edit?html,css,js,output

(note that for simplicity it only works for "positive" rects. starting from left/top and ending at the right/down.. but this can be easily corrected)

Jaime
  • 6,736
  • 1
  • 26
  • 42