Image Croping Tool with JS and JQuery in VF page.

Hi Guys,


In this post i am going to show how we can crop an image and upload it in Documents Object of Salesforce.

I am taking a simple example and following the below mentioned steps:-

• Create a VF page which has a upload image link.
• on click of upload link i am opening a pop up of another VF page which is used to select image file from local system.
• now after selecting file click on upload button.
• after clicking on upload button magic is started now you can zoom-in, zoom-out or drag image and can easily select part of image you needed to upload in salesforce document.
• Finally on click of save button image is inserted in document object and pop up window is closed.

Here the code:-

Screen Shoots:-

 

Upload Picture Page

 

On click of upload link opened popup page

 

choose picture from local system

 

selected picture get uploaded

 

Zoom Out picture

 

Zoom In Picture

 

Finally crop Picture

 

cropped picture saved

Hope this helps...happy Coding

Thanks
Anurag Jain