AndrewJBateman / ionic-angular-imagecrop

:clipboard: Ionic app to crop images. Another excellent tutorial from Simon Grimm at the Ionic Academy

⚡ Ionic Angular Image Crop

• App created using the Ionic framework to crop photos using an Angular Image Cropper module.
• Another great tutorial from Simon Grimm at the Ionic Academy - see 👏 Inspiration below.

📄 Table of contents

• ⚡ Ionic Angular Image Crop
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-do list
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• Updated to the latest Angular & Ionic versions, all dependencies updated
• Uses the Cordova camera plugin, improved with the Ionic-native camera plugin.
• This is for development, a jpg image is used instead of the camera image.

📷 Screenshots

📶 Technologies

• Ionic v6
• Angular v13
• Ionic/angular v6
• Angular RxJS Library v6
• ngx Image Cropper v6

💾 Setup

• Run npm i to install dependencies
• To start the server on localhost://8100 type: 'ionic serve -o'

💻 Code Examples

• Extract from home.page.ts to show camera options

const options: CameraOptions = {
    quality: 100,
    destinationType: this.camera.DestinationType.DATA_URL,
    encodingType: this.camera.EncodingType.JPEG,
    mediaType: this.camera.MediaType.PICTURE,
    sourceType: this.camera.PictureSourceType.CAMERA
}

🆒 Features

• Crops and manipulates images using image cropper methods.

📋 Status & To-do list

• Status: Working. Needs Cordoba to test properly.
• To-do: Nothing.

👏 Inspiration

• Simon Grimm´s Youtube video: How to Crop Images in Ionic 4 with CropperJS
• Nappd: How to add Image Cropper in ionic 4 app
• Adding Image Cropper in Ionic 4 Apps

📁 License

• This project is licensed under the terms of the MIT license.

✉️ Contact

• Repo created by ABateman, email: [e-mail]