Image Cropper
Drag-to-crop image component with optional aspect ratio lock.
Preview
Usage
views.py
python
from djust import LiveView
from djust.decorators import event_handler
from djust.components import ImageCropper
class MyView(LiveView):
template_name = "my_template.html"
def mount(self, request, **kwargs):
self.component = ImageCropper()
@event_handler()
def save_crop(self, value=None, **kwargs):
pass # your app acts on 'save_crop'; no component state movesmy_template.html
django
{{ component }}Events this component sends to the view: save_crop.
Needs its script on the page: <script src="{% static 'djust_components/image-cropper.js' %}"></script>. djust ships it; without it the markup renders but does not update in the browser.
Parameters
| Name | Type | Default | Description |
|---|---|---|---|
| src | str | '' | image URL to crop |
| crop_event | str — renames the event; identity is `name` | 'save_crop' | djust event fired with crop data (x, y, width, height) |
| aspect_ratio | str | '' | lock ratio (e.g. "1/1", "16/9", "4/3"), empty = free |
| min_width | int | 50 | minimum crop width in px (default 50) |
| min_height | int | 50 | minimum crop height in px (default 50) |
| disabled | bool | False | disable cropping (default False) |
| custom_class | str | '' | additional CSS classes |
| alt | str | 'Image to crop' | alternative text of the image (default "Image to crop") |
| **kwargs | — passed to `Component.__init__`: `name=` identifies the instance in the events it sends, `id=` sets `component.id`, and any other keyword is kept as state | — | — |
Source & styles
| File | Path | Notes |
|---|---|---|
| module | djust.components.components.image_cropper | Subclass it, or pass custom_class, to change how it renders. |
| css | djust_components/components.css | Defines 18 of this component's classes at line 1984, 1985, 1986, 1987, 1988, 1990, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999, 2000, 2001, 2003. Override those rules, or the custom properties they read, in a stylesheet loaded after it. |