Interactive image crop region selector
<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>
Copyright 2014-2021, Cindy Wang (CindyLinz) Licensed under the MIT license.