I need a tool in HTML 5 (which will work in a web browser) that does the following.
Here is a rough sketch what it'll have: [url removed, login to view]
1) Area where you drag the image
You drag a picture from your computer or directly from a browser (it should work with IE, Firefox and Chrome) into that area.
The picture shows up in it centered horizontally and vertically (but it's still not uploaded anywhere, it just shows up in the area 100% the original size it is).
The area is restricted in size of 568px x 416px. If the dragged image is bigger - the area shows upto it's size - the rest is not visible.
The user should be able to move around the image in the area by dragging it with the mouse or with the arrow keys on the keyboard (so they can pick another part of the image to be visible).
The user should also be able to scale up and down the image by holding the shift button and click-dragging the mouse over the picture.
2) 50% Preview area- basically this area mirrors 1:1 the first area, but is scaled down 50%
3) buttons. All of them do something on the image in area 1, where we drag/dropped it:
- Best fit - scales the image so it fills up both width and height of the area (but keeps it in the same aspect ratio)
- Fit Width - scales the image so it'll fill the area horizontally
- Fit Height - scales the image so it'll fill the area vertcically
- Center Horizontal - centers the image horizontally (but doesn't shift it up or down vertically)
- Center Vertical - centers the image vertically (but doesn't shift it left or right horizontally)
- button upload - saves (uploads) the visible image in Area1 through POST
I don't need it pretty. If it looks like the sketch I showed - it's fine.
5 freelanceria on tarjonnut keskimäärin 48 $ tähän työhön
I am a software developer working in a corporate company. I have good experience in this field and will deliver the application within time. Please consider my proposal and give me a chance to prove it Thanks