components / image-cropper

image-cropper.

drag-to-reposition, scroll/slider-to-zoom image cropper. pan and zoom are clamped so the image always covers the frame. emits { url, scale, x, y }.

{
  "scale": 1.5,
  "x": 0,
  "y": 0
}
installation
bunx @justin06lee/chrome@latest add image-cropper
props
nametypedefaultdescription
value *CropValue-controlled crop value { url, scale, x, y }.
onChange *(value: CropValue) => void-
sizenumber240frame size in px.
aspectnumber1width / height ratio of the frame.
minScalenumber1floored at 1 so the image can never be smaller than the frame.
maxScalenumber4
circlebooleanfalserender a circular crop guide.