Resize/Rotate/Crop Images Using jQuery Plugin – Cropzee

by

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.
jquery-image-crop

Libraries

Load the following supporting libraries on page.

<!-- custom fonts -->
    <link href="https://fonts.googleapis.com/css?family=Patrick+Hand&display=swap" rel="stylesheet">
    <!-- cropzee CSS bundle -->
    <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">
    <!-- cropzee JS bundle -->
    <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.

 <div>
        <div id="" class="image-previewer" data-cropzee=""></div>
        <input id="cropzee-input" type="file" name="">
</div>



Create a modal window in which you can resize/rotate/crop the image.

<!-- Modal content -->
        <div id="cropzee-modal" class="cropzee-modal">
            <div id="cropzee-close" class="cropzee-close">&times;</div>
            <div id="cropzee-modal-display-container" class="cropzee-modal-display-container">
                <div id="cropzee-modal-display" class="cropzee-modal-display"></div>
                <div id="cropzee-modal-cropper" class="cropzee-modal-cropper"></div>
                <div id="cropzee-modal-display2" class="cropzee-modal-display" style="clip: rect(46px, 205px, 205px, 46px);"></div>
                <div id="cropzee-cropper-outline" class="cropzee-cropper-outline" style="left:45px; top:45px; width: 160px; height: 160px;"></div>
            </div>
            <div class="cropzee-modal-buttons-container">
                <a id="cropzee-download-button" class="cropzee-modal-button" data-ripple="">
                        <img class="cropzee-svg" src="assets/icons/feather/download.svg">
                </a>
                <a id="cropzee-rotate-button" class="cropzee-modal-button" data-ripple="">
                    <!-- <svg class="feather">
                        <use xlink:href="assets/icons/feather/feather-sprite.svg#circle"/>
                    </svg> -->
                    <img class="cropzee-svg" src="assets/icons/feather/rotate-ccw.svg">
                </a>
                <a id="cropzee-crop-button" class="cropzee-modal-button" data-ripple="">
                    <img class="cropzee-svg" src="assets/icons/feather/crop.svg">
                </a>
                <a id="cropzee-save-button" class="cropzee-modal-button" data-ripple="">
                    <img class="cropzee-svg" src="assets/icons/feather/check-square.svg">
                </a>
            </div>
</div>

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

<div class="cropzee-cropping-canvas-container">
            <canvas id="cropzee-cropping-canvas"></canvas>
</div>

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.

DEMO | DOWNLOAD

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.

Published by Rohit