search

uploadcare / uploadcare-widget

Uploadcare Widget, an ultimate tool for HTML5 file upload supporting multiple file upload, drag&drop, validation by file size/file extension/MIME file type, progress bar for file uploads, image preview.
https://uploadcare.com/products/file_uploader/
BSD 2-Clause "Simplified" License
227 stars 102 forks source link

Same aspect ration for multiple images #528

Open TwunTee opened 5 years ago

TwunTee commented 5 years ago

Is it possible to use free crop for the first image and then apply its aspect ratio to other images too. I am trying to do something similar to how instagram does. User uploads his images, first image aspect ratio is fetched and then it is applied to other images too, so that when using it in a carousel the size of the container can remain the same. I tried using onchange, but it is triggered after the user clicks on add, if there is a trigger to know when the user has selected the image that would be good too.

optlsnd commented 5 years ago

Hi @TwunTee

Can you tell me more about the workflow? Are you using a widget with the "multiple" mode enabled or a user uploads files one by one? What happens after uploading? If possible, share your code snippet so I can look into it.

TwunTee commented 5 years ago

Yes i am using the widget with multiple mode enabled. The workflow will be like the widget has multiple option set to true and a user uploads multiple images either one by one or select all the images in one go either way once multiple images are selected the aspect ratio should be changed from free to the aspect ratio of the first image so that aspect ratio is same for all the images.

Would be good if the preview is shown with the aspect ratio changed instead of mini images.

The problem I am facing is that when the user uploads multiple images and their aspect ratio is different then when they get displayed on the mobile, it looks weird with one image having a different height, gets cropped out or zoomed in.

// Angular example
                                <ngx-uploadcare-widget
                                                       [images-only]="true"
                                                       image-shrink="1024x1024 95%"
                                                       [multiple]="true"
                                                       tabindex="-1"
                                                       [crop]="true"
                                                       (on-change)="onChange($event, 'images')"
                                                       (on-upload-complete)="imageUploadHandler($event)"
                                                       public-key="{{uploadcareKey}}">
                                </ngx-uploadcare-widget>
TwunTee commented 5 years ago

@optlsnd Hi any updates on this. Was the explanation ok or do I need to give more info?

TwunTee commented 5 years ago

@optlsnd @Zmoki Any updates or suggested workaround for this issue.

optlsnd commented 5 years ago

@TwunTee I'm sorry for such a long delay with the reply. Technically, there's no way to update widget's crop settings on the run. However, if you define a specific aspect ratio in crop settings, it will be applied to all uploaded images automatically. You can add aspect ratio validation to pass images with a certain aspect ratio or orientation only. Hope that helps.