/JS-Crop-Image

Interactive image crop region selector

Primary LanguageJavaScriptMIT LicenseMIT

JS-Crop-Image

Interactive image crop region selector

demo page

complete demo page source

Synopsis

<script src=crop-image.js></script>
<script>
  var target_image = document.getElementById('img');
  var crop_handle = crop_image(target_image, [ratio], function(crop_region){
    // when the crop region changed, notify with crop_region
    console.log(crop_region.w + 'x' + crop_region.h + '+' + crop_region.x + '+' + crop_region.y);
  });
  // the "ratio" parameter is optional. If given, the crop_handle will constraint the h / w to this value.

  crop_handle.set_crop({x: x, y: y, w: w, h: h});
    // Call this when you want to set the crop region explictly

  crop_handle.remove();
    // Call this when you want to remove the whole crop region
    // After this, the crop_handle is invalid.
    // You need to call crop_image again if you want to use the crop region selector once more.
</script>

License

Copyright 2014-2021, Cindy Wang (CindyLinz) Licensed under the MIT license.