Caman Cropper

var Cropper = window.Cropper;
    var URL = window.URL || window.webkitURL;
    var image = $("#gambars")[0];
    var options = {
        aspectRatio: 16 / 9,
        preview: '.img-preview',
    }
    var cropper = new Cropper(image, options);
    var originalImageURL = image.src;
    var uploadedImageURL;

    // Import image
    var inputImage = $('#inputImage')[0];
    // var inputImage = document.getElementById('inputImage');

    if (URL) {
    inputImage.onchange = function () {
        $(".gambar").show();
      var files = this.files;
      var file;

      if (cropper && files && files.length) {
        file = files[0];

        if (/^image\/\w+/.test(file.type)) {
          image.src = uploadedImageURL = URL.createObjectURL(file);
          cropper.destroy();
          cropper = new Cropper(image, options);
          inputImage.value = null;
        } else {
          window.alert('Please choose an image file.');
        }
      }
    };
    } else {
    inputImage.attr('disabled',true);
    inputImage.parentNode.className += ' disabled';
    }
$("#grayscale").on('click',function(){
          Caman('#gambars', function () {
            this.brightness(10);
            this.render();
          });
    });