-
Notifications
You must be signed in to change notification settings - Fork 1.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How to get perfect square with ImageCropper #4483
Comments
Hello michael-hawker, thank you for opening an issue with us! I have automatically added a "needs triage" label to help get things started. Our team will analyze and investigate the issue, and escalate it to the relevant team if possible. Other community members may also look into the issue and provide feedback 🙌 |
I'll be taking over this issue from here. I spent some time setting up a minimal repro, and wasn't able to get it to produce the bug. I'll be updating this comment with my findings as I go. Looks like the source of the problem is that calling var file = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///Assets\\Screenshot 2021-03-16 083652.png"));
await imgCropper.LoadImageFromFile(file);
this.imgCropper.AspectRatio = 1.0; Adding a Notably, this issue also exists when do you imgCropper.Source = writableBitmap;
imgCropper.AspectRatio = 1; Additional information
|
@Arlodotexe the LoadImageFromFile function seems to be awaiting the setsource here: WindowsCommunityToolkit/Microsoft.Toolkit.Uwp.UI.Controls.Media/ImageCropper/ImageCropper.cs Lines 373 to 382 in 7a9bf31
Basically there's either something that's happening in the XAML system for image loading or our Source changed callback here: Lines 33 to 48 in 7a9bf31
Which we also need to wait on as well, eh? Do we just need to use a Would that be sufficient? |
@michael-hawker I did try adding this code in the var taskCompletionSource = new TaskCompletionSource<object>();
target._sourceImage.ImageOpened += OnImageOpenedOrFailed;
target._sourceImage.ImageFailed += OnImageOpenedOrFailed;
await taskCompletionSource.Task;
target._sourceImage.ImageOpened -= OnImageOpenedOrFailed;
target._sourceImage.ImageFailed -= OnImageOpenedOrFailed;
void OnImageOpenedOrFailed(object sender, RoutedEventArgs e) => taskCompletionSource.SetResult(null); Which caused some fun side effects that we don't want. I think the root of the issue is definitely that the AspectRatio is being set while the image is still being loaded. There's a lot of code in |
!!! That was it. Calling Doing this fixes it for both of these scenarios that were broken: var file = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///Assets\\Screenshot 2021-03-16 083652.png"));
await imgCropper.LoadImageFromFile(file);
this.imgCropper.AspectRatio = 1.0; var url = new Uri("http://ipfs.io/ipfs/QmbnXcqg7s5J6wsrP85VkiUdfFnYvpfPGZYRkQ5CteA1BG");
var stream = await RandomAccessStreamReference.CreateFromUri(url).OpenReadAsync();
var writableBitmap = new WriteableBitmap(1000, 1000);
await writableBitmap.SetSourceAsync(stream);
imgCropper.Source = writableBitmap;
imgCropper.AspectRatio = 1; |
Discussed in #4478
Originally posted by jhariel8 February 7, 2022
Hello,
I'm working on a project in which we need to have an image that is either taken or uploaded by a user cropped to a perfect square. I thought that setting the aspect ratio to 1.0 would accomplish this; however, when I open the picture (a 1920x1080 photo), the crop box fits to the image. When I shrink the crop box, it makes an elongated rectangle instead of a square. Is there a way to make the crop box a rectangle and keep it in that shape?
For reference, here is my XAML:
`
`
The aspect ratio is set in the code-behind to 1.0.
I would appreciate any thoughts or suggestions!
The text was updated successfully, but these errors were encountered: