AngularJS – Image Crop Directive with Resize in Angular 1.x

Many web application has a feature to upload media including images, this can be for any purpose like Uploading some document, uploading screenshots, Updating profile images. To provide a user-friendly interface for uploading we can add an Image crop tool on the client side so that user can crop the desired portion of Images to be uploaded. On another side, it also helps in reducing disk space occupied by images as cropped images have lesser size.

In this post, we will add a Facebook styled image crop UI, where a user can select an image to upload after that it can be cropped resized before uploading on a server.

Let’s start…

We are going to use ngImgCrop[] module for crop functionality.

Download and Import Libraries in Index.html

Include ng-img-crop JS and CSS files

Note: Get latest from CDN here

Add ngImgCrop dependency in angular module function.

Then update controller code

Add CSS for Uploaded Image placeholder

In HTML add File input, module directive, and preview image tag

In myCroppedImage, it will return base 64 URL which can be saved as PNG image on the server side.

Options

There are various available options, for example,  area-type="square"  will change crop area from circle to square.

You can check more options here

How to Save base64 URL into PNG Image on Server?

Example JSON data sent from client to PHP server side

PHP file to save base64 object into png image on disk

Above PHP code will save file on a defined directory UPLOAD_DIR on server file system.

 

Note: This project is no longer maintained, but still can be used as it most easy to implement in applications.

Leave a Reply

avatar
  Subscribe  
Notify of