Lotus Image crop


A jQuery plugin to crop a image visually for the user. The user selection options can be retrieved using the api's to be processed by any image processing tool.

How to use it


<div class="lotus-image-container" 
         style="height:500px; width:100%;" 
         data-src="https://d1u1mce87gyfbn.cloudfront.net/media/artwork/genji-concept.jpg" 
         data-clip-height="320"
         data-clip-width="320" 
         data-zoom="100">

    $(".lotus-image-container").lotusImageCrop({'onchange': function(top,left,zoom,width,height){
          $("#x-position").val(left.toString())
          $("#y-position").val(top.toString())
          $('#zoom').val(zoom)
    }})

    $("#increase").on('click',function(e){
        $(".lotus-image-container").lotusImageCrop('increaseZoom')
        e.preventDefault();
    })

    $("#decrease").on('click',function(e){
        $(".lotus-image-container").lotusImageCrop('decreaseZoom')
        e.preventDefault();
        })

Demo


Where can I find the code ?


On Github - Lotus Select