Croppie TW

Croppie

by Bhavik Patel

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.5.1/croppie.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.5.1/croppie.js"></script>
<div id="CropTabImgDiv"></div>

JavaScript

var ImgSrcValewithParamter = 'http://myglobalcenter.com/media/1036/bg2-compressed.jpg'

SetCoppiValue();

function SetCoppiValue() {

    var ImgPlaceHolderHeight = 0;
    var ImgPlaceHolderWidth = 0;
    var CropImagePortHW = 0;
    // Get Image PlaceHolder Height and Width
 
   ImgPlaceHolderHeight = 280;
   ImgPlaceHolderWidth = 1022;
      
    

    //if open for the second time destroy it. 
    if (typeof $uploadCrop != 'undefined') {
        $uploadCrop.croppie('destroy');
    }

    //if placeHolderWidth is more reduce it by 2x + 1 and so on... 

    if (ImgPlaceHolderWidth >= 580 || ImgPlaceHolderHeight >= 400) {
        // chec for 3 time. 
        for (var i = 2; i < 5; i++) {
            if (ImgPlaceHolderWidth >= 580 || ImgPlaceHolderHeight >= 400) {
                CropImagePortHW = i;
                ImgPlaceHolderWidth = ImgPlaceHolderWidth / CropImagePortHW;
                ImgPlaceHolderHeight = ImgPlaceHolderHeight / CropImagePortHW;
            }
        }
    }
    var LastUpdatedPoints;

    $uploadCrop = $('#CropTabImgDiv').croppie({
        viewport: { width: ImgPlaceHolderWidth, height: ImgPlaceHolderHeight },
        boundary: { width: ImgPlaceHolderWidth + 50, height: ImgPlaceHolderHeight + 50 },
        customClass: "MainImage",
        enforceBoundary: true,
        enableOrientation: true,
        showZoomer: true,
        
             
});
   
    
 
}