The transparent like box, around the image preview goes out of the box while cropping.

Check this out:

Hi there 👋,

would be great if I could set the aspect ratio per image.
If you could point me to the right files to edit, I would do it myself and push a pull request 😊.

I assume I would have to add a new method in ImageCropper and pass the value to the aspect-ratio property?

Is there anyway to customize the cropper and use Circular cropper placeholder? so we can see if the image will displayed probably in circle in the app?

Hello.

How can i change the detail image size? I need to reduce the image dimensions, but both with or without ->avatar() method, when uses Image ->maxWidth(XX) not works because the size is fixed at your css... 318x318 px

When edit & save a new resource, and upload/crops an image, the new uploaded image is stored fine. But the old image is not removed on store.

If user change the image, i don't understand the need to mantain the old image; so i thing the old image must be removed.

Hi there,

Thanks for providing this :)

I just tried installing this in a new app which is using Nova 4, and the cropper does not show up, there are some javascript errors in the console, so my assumption is that it does not work with Nova 4.

I am willing to pay for your time helping me upgrade this :)

Here is my code (same as sample in the readme.md):

ImageCropper::make('Photo')
->disk('public')
->prunable()
->storeOriginalName('photo_name')
->storeSize('photo_size')
->preview(function () {
if (!$this->value) {
return null;
}
$url = Storage::disk($this->disk)->url($this->value);
$filetype = pathinfo($url)['extension'];
return 'data:image/' . $filetype . ';base64,' . base64_encode(file_get_contents($url));
})
->aspectRatio(16/9),

Although I have use the storeOriginalName(), it keep store 'uploaded_file.jpg' as filename. How to store the original filename?

And another issue is with the same configuration, when edit the resource (Edit Form), it didn't display the stored image. It only able to display stored image in details screen. Is it a correct behaviour?

If I define an aspect ratio, editor should open automatically "edit image" after upload in order to force user to crop the image.

If users ignore this step, they could upload not cropped image.

The readme here (https://novapackages.com/packages/r64/nova-image-cropper) is old :'(

I'm getting this error randomly on index, details and edit page for records with an image. I guess it's related to the image preview, because when there is no image on any records, everything works as expected, but right after adding an image to first record, this error happens.

My resource is as simple as:

            ImageCropper::make('Image')
                ->prunable()
                ->rules('nullable', 'image', 'max:5120')
                ->aspectRatio(10 / 8)

I'm trying to use this field in laravel nova 4 (4.11.1) and receiving this error

anyone having the same issue ?

Version: 1.1.4

Image always stored in PNG format. How to store image follow original type?

And how to store original filename in the storage path? Currently if using storeOriginalName() method, it only save the original name in that particular database column, not as the actual file name in the storage path.

Hi, i crop and upload the image fine and it's shown right in index and details page. But when edit a row, the image is not shown. See my code:

ImageCropper::make('Avatar', 'avatar')
    ->disk('my_custom_disk')
    ->path('images/usuarios/'.str_pad($this->id, 10, "0", STR_PAD_LEFT))
    ->preview(function () {
        if (!$this->value) return null;

        $url = Storage::disk($this->disk)->url($this->value);
        $filetype = pathinfo($url)['extension'];
        return 'data:image/' . $filetype . ';base64,' . base64_encode(file_get_contents($url));
    })->avatar(),

I think it's a good idea to preview the image when editing too... but only update it when user re-crops the image, upload & crop a new image.

Hi, first of all, thanks for the great plugin, it's helping me a lot.

A problem I'm facing is that I need to save the original file name and it size.
The problem is that the plugin manually set uploaded_file.jpg to original Name.
I can confirm that this happens just with this plugin. The native ImageField works great.

In file PicturePicker.vue I found:

// The default value been set
69: originalName: 'uploaded_file.jpg',

...

// The originalName is been replaced, but for some reason it's not working.
119: this.originalName = file.name

Hi, I cannot get image preview on my production environment (where a basic auth is available).

Looking into your code I found this snippet

        $url = Storage::disk($this->disk)->url($this->value);

        $path_info = pathinfo($url);

        $filetype = 'jpg';

        if (array_key_exists('extension', $path_info)) {
            $filetype = $path_info['extension'];
        }

        try {
            $encoded_file = base64_encode(file_get_contents($url));
        } catch (\Exception $e) {
            return '';
        }

This force PHP to perform a http request because ->url method, on Storage, return an absolute url (that breaks down on my environment).

I don't know if it's the right behaviour....

Hi,

A form with an Image Cropper Field can not be saved without changing image.

On Safari/Firefox (Chrome works fine)

JS Error Message:
Unhandled Promise Rejection: TypeError: undefined is not an object (evaluating 'e.t0.response.status')

Laravel Nova Image Field had the same issue (resolved now) : laravel/nova-issues#378

Y'all, I am so happy for this package. Thank you!

Quick note: The button text wraps on smaller screens, and it'd be awesome if it didn't. <3

Using laravel internal http server, this packages doesn't work.
It crashes the web server.

Using Apache or Nginx it works... very strange

Can we support as it is one of the most used package :)

Thanks 👍

Hello!

I am having issues where images I upload that have been taken on an iPhone are rotated by 90deg in the preview and stored incorrectly.
This is an issue I have come across before and fixed with the following solution:
https://www.robert-kent.com/php-fix-exif-orientation-in-images/

Is this is a known issue with this package?
If so I am happy to have a crack at a PR to fix this.

Thanks
Chris

Thanks for the library

Did you plan to support avatar?

Currently, avatar is not being shown next to title as stated here. See the below image. I don't know if I am doing something wrong.

I was able to fix this by implementing Laravel\Nova\Contracts\Cover interface in ImageCropper class. The original Laravel\Nova\Fields\Avatar field also implements that.

Is there any other way to achieve this currently?

ImageCropper is forcing a crop immediately after selecting a file. It also forces an aspect ratio even if this function has not been called.

Hi,
There is an issue when the resource has multiple images. click on change image on any image will change only the first image in the resource.

When cancel a crop, image preview continues to show. But the image was rejectec, so don't need to show it.

And more, the image is uploaded full, without cut. I thing, since i reject the crop, must reject the image too.

Lets say that the post belongs to a user: BelongsTo::make('User')->showCreateRelationButton();

If that User resource is using this package (The image cropper) when you go to the Post resource and click the + button (To create a new User for the post) it doesn't show anything and flickers.

How I can save original image with cropped image?

Is there any way to not force any or the original aspect ratio, and crop to whichever size you would like?