create a mobile compatible image cropper and uploader

create a mobile compatible image cropper and uploader

I need a web based script that works on android phone browser.

Function.
In my app the user will click the "Set Avatar" button. The next screen will load. The screen will show a full screen website in a web browser object.

When the page loads, it will ask user to select a photo from their phone. Now most pictures will be rectangle but i need a square avatar.

So after choosing picture they will be shown the picture on their mobile and asked to crop the image, zoom in/out, then press upload button.

When they press upload the server or script will crop and/or resize/zoom the image and then save it on my server. So i need to be able to specify the save to location on my server which may change if required.

Heres an example of one i found, but i cant get it to work on mobile browser as it doesnt allow you to choose file etc... but it give idea of what i want.

Note: this will be shown on android phones/tablets and needs to be optimised so it fits the screen (maybe using viewports).

I dont mind what language is used as long as it works. Keep it simple.

I need the background image to be set aswell (i will send this to you)

---

Requirements

php, javascript, html5

---

Skills Required

Html5 Javascript Website Image