Image Cropping and Transformation with Ionic Angular

Learn to crop images in your Ionic Angular application with ngx-image-cropper and Capacitor!
🔥 Learn Ionic faster with the Ionic Academy: ionicacademy.com/
💎 Get the Built with Ionic Book: builtwithionic.com/
🎉 Get my Practical Ionic Book: devdactic.com/practical-ionic/
#############################
👨‍💻 Want to read instead of watch?
Here's the full Ionic tutorial: ionicacademy.com/image-crop-i...
⚡️ NEW: 46 Pages Ionic QUICKSTART GUIDE
ionicacademy.com/ionic-quicks...
➡️ Take my famous 7 Day Ionic Crash Course
ionicacademy.com/ionic-crash-...
🤷‍♂️ Want more Ionic tutorials?
There you go: devdactic.com/
#############################
❤️ You can also find me on:
Instagram: / simongrimm_
Twitter: / schlimmson
Facebook: / devdactic
TikTok: / simongrimm_
Or join our Facebook group:
/ simonics
#############################
00:00 Intro
01:03 Image Crop Setup
09:03 Capacitor image capture with Cropper
15:18 Working with the Cropper component
23:22 Recap
#ionic #angular #imagecrop

[@galaxies_dev]

Want to learn more about Ionic? Check out the free Quick Start Guide: ionicacademy.com/ionic-quickstart-guide/ 🔥
Make sure to subscribe for more! ua-cam.com/users/simongrimmdev_?sub_confirmation=1

[@chizuru1999]

Simon I got so hooked with the one dark + jetbrians mono theme by watching you. I am never going back 😆

[@shadowind30]

Nice one, I had a similar implementation, but It also had *compressorjs* for optimizing the image size,

[@bessonniy9208]

It's amazing! Thank you! Wishing you a million subscribers!

[@galaxies_dev]

Thank you so much 😀

[@pemonter]

I'm so grateful!

[@thinkinco]

As always you are the best... Thank you very much for these quick wins...

[@galaxies_dev]

My pleasure!

[@behicsakar]

i loved this video !

[@galaxies_dev]

Thank you!

[@VimleshKumarMaurya]

can u check cropper with allowMoveImage:"true",cropper not working

[@suryateja2524]

Please do video on ionic-recat

[@born2win439]

Hi Simon,
is there a way to also crop PDFs?
Thank you!

[@ranarehan8558]

you are amazing sir

[@galaxies_dev]

Thanks a lot!

[@ranarehan8558]

@@galaxies_dev it's my pleasure sir!

[@aishahasan3707]

Can you please do tutorial about how to add Notification service extension using Cordova FCM?

[@ishfaqwani2311]

sir how can i change width and height of image cropper in runtime

[@alanbique2548]

Its so good.. i logged in my 2 accounts to like twice

[@galaxies_dev]

That's the spirit Alan 💪

[@mudardastam6579]

this library working in ionic 7?

[@dhnydhny-ys8bp]

i have try in android and i have import hammerjs in main.ts, but i found the lag n not smooth when resizing and dragging the cropper, did I miss anything?
everything runs smoothly in the browser, why doesn't Android?
i found the issue, cropper size is not update before screen clicked, so size changes don't happen in realtime with gestures.
edited: "has solved 🤩 (add detect changes on pinch)"

[@aishahasan3707]

Tank you for this tutorial, is this work in Cordova?

[@galaxies_dev]

Yeah I think it should!

[@pedrorafaelsuarezesteris704]

I have a old project that I want to update and this part works very well to me. I use CameraResultType.DataUrl and passed as Base64 and it worked. But now it doesn't work anymore. I don't know where the image is not well formatted. If it's a sanytizer trouble, etc. It is very frustrating...

[@pedrorafaelsuarezesteris704]

Definitely the problem is when I try to make crop into a modal view. After a lot of tries and internet searchs, I couldn't make it works. However, it worked into a normal view.

[@Samuel-sl7vf]

how can i get the name of the image selected

[@rayroninternetservic]

aesome quick win. I have a client who is looking for this functionality

[@galaxies_dev]

Happy to help Ray!

[@ranarehan8558]

#captionionic

[@ramam7787]

When I crop the image, I can't see it because it returns 'undefined'. Has anyone else experienced the same issue and managed to solve it?

[@ramam7787]

In the original code, the event ImageCroppedEvent contained a property called blob, which represented the cropped image data in the form of a Blob object. A Blob is a binary large object that can store large amounts of binary data, such as images. However, to display the image in the interface, we usually need to convert it to a data URL (base64 encoded string).
imageCropped(event: ImageCroppedEvent) {
const croppedBlob = event.blob;

const croppedFile = new File([croppedBlob], 'cropped-image.png', { type: croppedBlob.type });

// Data URL (base64)
const reader = new FileReader();
reader.onload = () => {
const base64String = reader.result as string;
this.croppedImage = base64String;
};
reader.readAsDataURL(croppedFile);
}

[@Nobudy_1]

But the cropper is too slow 😢

[@ranarehan8558]

first comment