Simple Image Manipulation HTML 5 tool

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.

Please when you reply to this, start with "I AM REAL" so I know this isn't a bot responding.


Näytä lisää: pick your part, image in html 5, html 5 web, html 5 up, html 5 it, html 5 buttons, html 5 button, html 5 browser, html header image width, simple html code image scroller next previous, html table image fit width, html resize image width, html resize image max height, html resize image max width max height, html background image width fix code, upload image tool html, simple html based image viewers, html background image fit width

Tietoa työnantajasta:
( 1 arvostelu ) Sofia, Bulgaria

Projektin tunnus: #8660560

5 freelanceria on tarjonnut keskimäärin %project_bid_stats_avg_sub_26% %project_currencyDetails_sign_sub_27% tähän työhön


Hello Dear!, I am really interested to work on this project, i am sure do quality work. I can start the work now , and can provide the best services from my end. Please come on chat to discuss more about the project Lisää

$60 USD 1 päivässä
(26 arvostelua)

Hello, i have done a few familiar tools like this some time ago, reference URLs: [url removed, login to view] & [url removed, login to view] for the uploading & re-sizing process, you Lisää

$55 USD 2 päivässä
(16 arvostelua)

I am confident that I can bring the same level of high standards to your company. Aside from my technical competencies, I am a solid team player who can not only work to tight deadlines, but also has plenty of initiati Lisää

$45 USD 1 päivässä
(4 arvostelua)

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

$45 USD 1 päivässä
(0 arvostelua)

A proposal has not yet been provided

$40 USD 2 päivässä
(0 arvostelua)

Hi, I can do this for you. Please tell me when would you like to start...! I have proven track record of more than 12+ years of Web Applications Development, with sound knowledge of working on a diverse range of Lisää

$55 USD 3 päivässä
(0 arvostelua)