Resize/Rotate/Crop Images Using jQuery Plugin – Cropzee

jQuery Plugin – Cropzee allow you to Resize/Rotate/Crop Images before uploading image, like you have seen this feature on many website whenever change your profile pic, you can also crop rotate and resize your profile pic before updating.. so that you get best profile pic visibility. Cropzee is a free, and open source customizable jQuery plugin to crop and rotate pictures before submitting for upload.

Libraries

Load the following supporting libraries on page.

    <link href="https://fonts.googleapis.com/css?family=Patrick+Hand&display=swap" rel="stylesheet">
    
    <link rel="stylesheet" href="assets/css/ripple.css">
    <link rel="stylesheet" href="assets/css/normalize.css">
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="assets/css/cropzee.css">
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js">script>
    <script src="assets/js/jquery.ui.touch-punch.min.js" defer>script>
    <script src="assets/js/ripple.js" defer>script>
<script src="assets/js/cropzee.js" defer>script>

HTML

Create file upload box with image preview container which will display final image preview.

Create canvas element to preview the cropped image in the modal.

="cropzee-cropping-canvas-container">
            ="cropzee-cropping-canvas">>
>

JS

Finally Initialize the image cropper by calling the function on the file input.

$(function() {   
  cropzee("#cropzee-input");
});

See live demo and download source code.

This awesome script developed by BossBelle, Visit their official github repository for more information and follow for future updates.

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

Related