Example for V2.

[francisgradient]

Can anyone help with V2 with examples on how to mount and image crop it and change the image and crop it again. How to contain the image in the canvas and stuff.

Like a live working example with uploading multiple images. The $destroy function is deprecated hence how to use $replace method to change the image.

I am trying to integrate cropperjs v2 in Livewire but have failed trying many attempts. The docs are too hard to understand. Need help please .!

[francisgradient]

I am working on TALL Stack app here is a cropper modal I tried. but I am unable to reinitiate the DOM cropper elements.

<flux:modal name="edit-cropper" class="w-[95vw] md:w-[500px] shadow-xl rounded-xl" variant="bare">
    <div class="space-y-4 backdrop-blur-lg rounded-xl py-4 px-2.5" 
         x-data="{ imageSrc: '' }" 
         x-on:image-selected.window="imageSrc = $event.detail.src">

        <!-- Header -->
        <div class="text-center mb-2">
            <flux:text size="lg" class="font-bold text-zinc-900 dark:text-zinc-100">Crop Profile Image</flux:text>
            <flux:text class="text-white dark:text-zinc-400">Drag to adjust the selection area</flux:text>
        </div>

        <!-- Cropper -->
        <div class="flex justify-center">
            <cropper-canvas
                class="w-[85vw] h-[85vw] sm:w-[400px] sm:h-[400px] md:w-[500px] md:h-[500px] rounded-xl overflow-hidden" 
                background>
                <cropper-image 
                    x-bind:src="imageSrc" 
                    alt="Selected profile picture"
                    scalable skewable translatable>
                </cropper-image>
                <cropper-selection x-ref="cropper" width="500" height="500" resizable scalable>
                    <cropper-grid role="grid" covered></cropper-grid>
                    <cropper-crosshair centered></cropper-crosshair>
                    <cropper-handle action="move" theme-color="rgba(255, 255, 255, 0.35)"></cropper-handle>
                    <cropper-handle action="n-resize"></cropper-handle>
                    <cropper-handle action="e-resize"></cropper-handle>
                    <cropper-handle action="s-resize"></cropper-handle>
                    <cropper-handle action="w-resize"></cropper-handle>
                    <cropper-handle action="ne-resize"></cropper-handle>
                    <cropper-handle action="nw-resize"></cropper-handle>
                    <cropper-handle action="se-resize"></cropper-handle>
                    <cropper-handle action="sw-resize"></cropper-handle>
                </cropper-selection>
            </cropper-canvas>
        </div>

        <!-- Actions -->
        <div class="flex flex-col sm:flex-row justify-between gap-2 mt-4">
            <flux:button 
                variant="primary" 
                class="w-full sm:w-auto"
                x-on:click="
                    $refs.cropper.$toCanvas({ width: 500, fillColor: '#fff' })
                        .then(canvas => {
                            const imageData = canvas.toDataURL('image/jpeg', 0.9);
                            $wire.saveCroppedImage(imageData);
                            $flux.modal('edit-cropper').close();
                        })
                        .catch(error => console.error('Crop error:', error));
                ">
                Save Image
            </flux:button>

            <flux:button 
                variant="filled" 
                class="w-full sm:w-auto" 
                x-on:click="
                    imageSrc = '';
                    $flux.modal('edit-cropper').close();
                ">
                Cancel
            </flux:button>
        </div>
    </div>
</flux:modal>