jQuery Photo Cropping Plugin For Profile Picture – Croppie.js

0 195

You must have seen profile picture cropping feature on many big sites like facebook and google when you upload your profile picture you have option to crop your photo so that you can display best position of your photo in different different sizes. it helps to create good user experience . You can also add this image cropping feature on your website and make user’s profile picture more awesome and fancy that’s why in this post i am going share cool image cropping plugin for your web based apps. The plugin name is Croppie.js, It is a fast, easy to use image cropping plugin with lot’s of configuration options which help you to customize cropping feature as per your project need.

Integrate Photo Cropping Plugin

Libraries

Include required libraries on your page, the plugin dependent on jquery library so don’t forget to include latest jqquery library on page.

<!--CSS-->
<link rel="stylesheet" href="croppie.css" />
 
<!--JS-->
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="croppie.min.js"></script>

There is two basic method to enable the crop feature on image.
Method-1 :- Simplest method to call crop feature on image just call the plugin’s function on image class element.

<img class="my-image" src="demo/demo-1.jpg" />
<script>
$('.my-image').croppie();
</script>

Method-2 :- Add div element which load image and display crop area.

<div class="demo"></div>
<script>
$('.demo').croppie({
    url: 'demo/demo-1.jpg',
});
</script>

 

Very basic example with plugins configuration.

var basic = $('.demo').croppie({
    viewport: {
        width: 150,
        height: 200
    }
});
basic.croppie('bind', {
    url: 'demo/cat.jpg',
    points: [77,469,280,739]
});
//on button click
basic.croppie('result', 'html').then(function(html) {
    // html is div (overflow hidden)
    // with img positioned inside.
});

See live demo and download source code.

DEMO | DOWNLOAD

Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.

 

Leave A Reply

Your email address will not be published.