How to add Image Cropper in ionic 4 app
Published: 2020-03-26 00:02:13

<main role="main"><article class=" u-minHeight100vhOffset65 u-overflowHidden postArticle postArticle--full is-supplementalPostContentLoaded is-withAccentColors" lang="en"><div class="postArticle-content js-postField js-notesSource editable" id="editor_6" g_editable="true" role="textbox" contenteditable="true" data-default-value="Title
Tell your story…" spellcheck="false"><section name="6c86" class="section section--body section--first section--last"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><p name="9898" class="graf graf--p graf-after--figure">This is Part-2 of two post series. In this post, you will learn how to implement an Image Cropper in Ionic 4 apps 🔥. <a href="https://enappd.com/blog/image-picker-in-ionic-4-app/67/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Part 1 of the series discusses how to use Image picker in IONIC 4 app.</a></p><p name="2bfa" class="graf graf--p graf-after--p">We will create a sample app, where users can pick an image from either camera or gallery, After picking, user can see crop their image as well</p><blockquote name="2dd8" class="graf graf--blockquote graf-after--p">Complete source code of this tutorial is available in the <a href="https://github.com/enappd/ImageCrooper.git"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank">ionic-4-image-cropper-and-picker</a></blockquote><p name="0d02" class="graf graf--p graf-after--blockquote is-selected">I have explained how to add Image Picker in Part 1 of this story you can check it here. In this post, we will start from the previous blog</p><h3 name="59b5" class="graf graf--h3 graf-after--p">What is Ionic&nbsp;4?</h3><p name="eaae" class="graf graf--p graf-after--h3">You probably already know about Ionic, but put this section in every blog just for the sake of beginners. <strong class="markup--strong markup--p-strong">Ionic</strong> is a complete open-source SDK for hybrid mobile app development. Ionic provides tools and services for developing hybrid mobile apps using Web technologies like CSS, HTML5, and Sass. Apps can be built with these Web technologies and then distributed through native app stores to be installed on devices.</p><p name="de54" class="graf graf--p graf-after--p">In other words&#8202;—&#8202;If you create native apps in Android, you code in <strong class="markup--strong markup--p-strong">Java</strong>. If you create native apps in iOS, you code in <strong class="markup--strong markup--p-strong">Obj-C</strong> or <strong class="markup--strong markup--p-strong">Swift</strong>. Both of these are powerful, but complex languages. With Cordova (and Ionic) you can write a single piece of code for your app that can run on both iOS and Android (and windows!), that too with the simplicity of HTML, CSS, and JS. I’m a huge fan of Ionic and been developing Ionic apps for last 4 years.</p><h3 name="f3f0" class="graf graf--h3 graf-after--p">Structure</h3><p name="4e4f" class="graf graf--p graf-after--h3">We’ll follow a stepped approach to creating an Image Cropper app in Ionic 4. We’ll use an IONIC native plugin for Image Cropping. Following are the steps</p><ul class="postList"><li name="5d32" class="graf graf--li graf-after--p">Step 1&#8202;—&#8202;Create a Basic Ionic 4 App</li><li name="93d1" class="graf graf--li graf-after--li">Step 2— Setup Image Crop plugin</li><li name="79e9" class="graf graf--li graf-after--li">Step 3— Use Image Picker Plugin In App</li><li name="4f8a" class="graf graf--li graf-after--li">Step 4&#8202;—&#8202;Build the app in Android and test</li></ul><p name="e399" class="graf graf--p graf-after--li">So let’s jump right in!</p><figure tabindex="0" contenteditable="false" name="0e6b" class="graf graf--figure is-defaultValue graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 500px; max-height: 281px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 56.2%;"></div><img class="graf-image" data-image-id="1*KzEYxNxywpz5RvbasElKGw.gif" data-width="500" data-height="281" src="https://cdn-images-1.medium.com/max/720/1*KzEYxNxywpz5RvbasElKGw.gif"><div class="crosshair u-ignoreBlock"></div></div></figure><h3 name="c218" class="graf graf--h3 graf-after--figure">Step 1&#8202;—&#8202;Create a basic Ionic 4&nbsp;app</h3><blockquote name="ee25" class="graf graf--blockquote graf-after--h3"><em class="markup--em markup--blockquote-em">I have covered this topic in detail in </em><a href="https://enappd.com/blog/how-to-create-an-ionic-4-app-for-beginners/13/?source=post_page---------------------------"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><em class="markup--em markup--blockquote-em">this blog</em></a><em class="markup--em markup--blockquote-em">.</em></blockquote><p name="7cf9" class="graf graf--p graf-after--blockquote">In short, the steps you need to take here are</p><ul class="postList"><li name="9e47" class="graf graf--li graf-after--p">Make sure you have node installed in the system (V10.15.3 at the time of this blog post)</li><li name="622c" class="graf graf--li graf-after--li">Install <strong class="markup--strong markup--li-strong">ionic cli </strong>using npm (my Ionic version is 4.1.0 currently)</li><li name="9de3" class="graf graf--li graf-after--li">Create an Ionic app using <code class="markup--code markup--li-code">ionic start</code></li></ul><p name="edf3" class="graf graf--p graf-after--li">You can create a <code class="markup--code markup--p-code">blank</code> starter for the sake of this tutorial. On running <code class="markup--code markup--p-code">ionic start ionic-4-image-cropper blank</code>&nbsp;, node modules will be installed. Once the installation is done, run your app on browser using</p><pre name="e3ab" class="graf graf--pre graf-after--p">$ ionic serve</pre><p name="5c38" class="graf graf--p graf-after--pre">The app will launch on browser. You can go to <strong class="markup--strong markup--p-strong">Inspect → Device Mode</strong> to see the code in a mobile layout. You can create a basic layout for implementing image cropping. All the real action will happen when we build the app for Android.</p><p name="39d2" class="graf graf--p graf-after--p">Next we’ll add the Image Crop plugin to our app.</p><h3 name="6cb6" class="graf graf--h3 graf-after--p">Step 2&#8202;—&#8202;Setup Image Crop&nbsp;plugin</h3><h4 name="80d2" class="graf graf--h4 graf-after--h3">Installation</h4><p name="60f4" class="graf graf--p graf-after--h4">&zwnj;For that, open your terminal and type</p><pre name="fd38" class="graf graf--pre graf-after--p">$ ionic cordova plugin add cordova-plugin-crop</pre><p name="8c9d" class="graf graf--p graf-after--pre">It’s a bit clumsy to work with Cordova plugin so the ionic team created <strong class="markup--strong markup--p-strong">Ionic Native</strong>, which is a wrapper for the Cordova plugins so we can use them in a more “Angular/Ionic” way.</p><p name="f788" class="graf graf--p graf-after--p">&zwnj;So now we will open our terminal and try this command&zwnj; to install Facebook package from Ionic Native</p><pre name="5c6b" class="graf graf--pre graf-after--p">$ npm install @ionic-native/camera</pre><h3 name="899d" class="graf graf--h3 graf-after--pre">Step 3&#8202;—&#8202;Use Image C<code class="markup--code markup--h3-code">rop </code>Plugin In&nbsp;App</h3><p name="da88" class="graf graf--p graf-after--h3">Using this plugin The first step you will need to do is add this plugin to your app’s module</p><p name="3529" class="graf graf--p graf-after--p">Import these plugins like this</p><pre name="2ce4" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">import { Crop } from '@ionic-native/crop/ngx';</code></pre><p name="4ba2" class="graf graf--p graf-after--pre">and add this to providers of your app Like this</p><pre name="1070" class="graf graf--pre graf-after--p">providers: [<br>StatusBar,<br>SplashScreen,<br>Crop,<br>Camera,<br>File,<br>{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }<br>],</pre><p name="482f" class="graf graf--p graf-after--pre">So after Adding Your <code class="markup--code markup--p-code">app.module.ts</code> look like this</p><figure tabindex="0" contenteditable="false" name="8732" class="graf graf--figure graf--iframe is-defaultValue graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/bunyy/662b9bf77b3de3697b82a2a90e23fca5.js %}</div></div></figure><p name="5576" class="graf graf--p graf-after--figure">Now time to import this plugin in your <code class="markup--code markup--p-code">home.ts</code> where we will use this plugin</p><p name="56ba" class="graf graf--p graf-after--p">So for using this plugin in our <code class="markup--code markup--p-code">home.ts</code>&nbsp;, first we will import the plugin like this</p><pre name="9672" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">import { Crop } from '@ionic-native/crop/ngx';</code></pre><p name="7013" class="graf graf--p graf-after--pre">and inject it in your Constructor (Dependency injection) like this</p><pre name="9f89" class="graf graf--pre graf-after--p">constructor(<br>private camera: Camera,<br>private crop: Crop,<br>public actionSheetController: ActionSheetController,<br>private file: File<br>) { }</pre><p name="ad2e" class="graf graf--p graf-after--pre">And use this code for Adding Image Cropper in Ionic App</p><pre name="72d1" class="graf graf--pre graf-after--p">cropImage(fileUrl) {<br>this.crop.crop(fileUrl, { quality: 50 })<br>.then(<br>newPath =&gt; {<br>this.showCroppedImage(newPath.split('?')[0])<br>},<br>error =&gt; {<br>alert('Error cropping image' + error);<br>}<br>);<br>}</pre><p name="8338" class="graf graf--p graf-after--pre">After adding this code, your<code class="markup--code markup--p-code"> home.ts</code> looks something like this.</p><figure tabindex="0" contenteditable="false" name="a23f" class="graf graf--figure graf--iframe is-defaultValue graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/bunyy/3d4e300975988f2b572925b7681490f2.js %}</div></div></figure><h3 name="6321" class="graf graf--h3 graf-after--figure">Step 4&#8202;—&#8202;Build your app on Android and&nbsp;test</h3><p name="4c7f" class="graf graf--p graf-after--h3">If you have carried out the above steps correctly, Android build should be a breeze.</p><p name="0252" class="graf graf--p graf-after--p">Run the following command to create Android platform</p><pre name="7d32" class="graf graf--pre graf-after--p">$ ionic cordova platform add android</pre><p name="3764" class="graf graf--p graf-after--pre">Once platform is added, run the app on device (Make sure you have a device attached to the system).</p><pre name="c987" class="graf graf--pre graf-after--p">$ ionic cordova run android</pre><p name="dd13" class="graf graf--p graf-after--pre">Once your app is up and running on the device, you can start testing all the functions. The screen shown here is taken from a real Android device 😎</p><figure tabindex="0" contenteditable="false" name="b61e" class="graf graf--figure is-defaultValue graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 300px; max-height: 600px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 200%;"></div><img class="graf-image" data-image-id="1*-jSh2IvaTBPk7WvY4ng5uA.jpeg" data-width="300" data-height="600" src="https://cdn-images-1.medium.com/max/720/1*-jSh2IvaTBPk7WvY4ng5uA.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><figure tabindex="0" contenteditable="false" name="84e6" class="graf graf--figure graf-after--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 300px; max-height: 600px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 200%;"></div><img class="graf-image" data-image-id="1*VdbiYQwsVaakWiTgHAa_9w.jpeg" data-width="300" data-height="600" src="https://cdn-images-1.medium.com/max/720/1*VdbiYQwsVaakWiTgHAa_9w.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Cropping image in Ionic 4&nbsp;App</figcaption></figure><h3 name="df33" class="graf graf--h3 graf-after--figure">Conclusion</h3><p name="9011" class="graf graf--p graf-after--h3">In this post, you learned how to implement Image Cropper in your Ionic 4 app and build it in android to perform image cropping.</p><blockquote name="e39a" class="graf graf--blockquote graf-after--p"><em class="markup--em markup--blockquote-em">Complete source code of this tutorial is available in the </em><a href="https://github.com/enappd/ImageCrooper.git"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><em class="markup--em markup--blockquote-em">ionic-4-image-picker-cropper</em></a></blockquote><h3 name="ee1b" class="graf graf--h3 graf-after--blockquote">Next Steps</h3><p name="7a20" class="graf graf--p graf-after--h3">Now that you have learned the implementation of Image Cropper in Ionic 4, you can also try</p><ul class="postList"><li name="aff8" class="graf graf--li graf-after--p">Ionic 4 Payment Gateways&#8202;—&#8202;<a href="https://enappd.com/blog/ionic-4-stripe-payment-integration-with-firebase-for-apps-and-pwa/17"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Stripe</a> | <a href="https://enappd.com/blog/ionic-4-paypal-payment-integration-for-apps-and-pwa/16"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">PayPal</a> | <a href="https://enappd.com/blog/how-to-integrate-apple-pay-in-ionic-4-apps/21"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Apple Pay</a> | <a href="https://enappd.com/blog/how-to-integrate-razorpay-in-ionic-4-apps-and-pwa/20"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">RazorPay</a></li><li name="8c75" class="graf graf--li graf-after--li">Ionic 4 Charts with&#8202;—&#8202;<a href="https://enappd.com/blog/ionic-4-charts-using-google-charts/66"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Google Charts </a>| <a href="https://enappd.com/blog/adding-charts-in-ionic-4-apps-and-pwa-part-3/60"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">HighCharts</a> | <a href="https://enappd.com/blog/adding-charts-in-ionic-4-apps-and-pwa-part-2/54"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">d3.js</a> | <a href="https://enappd.com/blog/charts-in-ionic-4-apps-and-pwa-part-1/52"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Chart.js</a></li><li name="7763" class="graf graf--li graf-after--li">Ionic 4 Social Logins&#8202;—&#8202;<a href="https://enappd.com/blog/facebook-login-in-ionic-4-apps-using-firebase/25"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Facebook</a> | <a href="https://enappd.com/blog/google-login-in-ionic-4-apps-using-firebase/39"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Google</a> | <a href="https://enappd.com/blog/twitter-login-in-ionic-4-apps-using-firebase/24"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Twitter</a></li><li name="2724" class="graf graf--li graf-after--li">Ionic 4 Authentications&#8202;—&#8202;<a href="https://enappd.com/blog/email-authentication-with-firebase-in-ionic-4/38"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Via Email</a> | <a href="https://enappd.com/blog/firebase-anonymous-login-in-ionic-4/37"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Anonymous</a></li><li name="5038" class="graf graf--li graf-after--li">Ionic 4 Features&#8202;—&#8202;<a href="https://enappd.com/blog/using-geolocation-geocoding-and-reverse-geocoding-in-ionic-4/45"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Geolocation</a> | <a href="https://enappd.com/blog/qr-code-scanning-and-optical-character-recognition-ocr-in-ionic-4/9"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">QR Code reader </a>| <a href="https://enappd.com/blog/best-fitness-plugins-for-ionic-4-how-to-use-pedometer/15"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Pedometer</a></li><li name="2a38" class="graf graf--li graf-after--li">Media in Ionic 4&#8202;—&#8202;<a href="https://enappd.com/blog/spotify-like-music-in-ionic-4-apps/48"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Audio</a> | <a href="https://enappd.com/blog/adding-video-player-in-ionic-4-app/64"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Video</a> | <a href="https://enappd.com/blog/image-picker-in-ionic-4-app/67"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Image Picker</a></li><li name="5759" class="graf graf--li graf-after--li">Ionic 4 Essentials&#8202;—&#8202;<a href="https://enappd.com/blog/ionic-4-save-and-retrieve-data-locally-on-device/59"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Native Storage</a> | <a href="https://enappd.com/blog/how-to-translate-in-ionic-4-globalization-internationalization-and-localization/11"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Translations</a> | <a href="https://enappd.com/blog/rtl-right-to-left-use-in-ionic-4/50"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">RTL</a></li><li name="9bcf" class="graf graf--li graf-after--li">Ionic 4 messaging&#8202;—&#8202;<a href="https://enappd.com/blog/implement-ionic-4-firebase-push/34"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Firebase Push</a> | <a href="https://enappd.com/blog/automatically-read-sms-in-ionic-4-apps/42"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Reading SMS</a> | <a href="https://enappd.com/blog/local-notifications-in-ionic-4/69"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Local notification</a></li><li name="1831" class="graf graf--li graf-after--li">Ionic 4 with Firebase&#8202;—&#8202;<a href="https://enappd.com/blog/how-to-integrate-firebase-in-ionic-4-apps/23"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Basics</a> | <a href="https://enappd.com/blog/firebase-with-ionic-4-hosting-auth-and-db-connection/58"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Hosting and DB</a> | <a href="https://enappd.com/blog/firebase-cloud-functions-in-ionic-4-complete-guide/32"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Cloud functions</a></li></ul><p name="2930" class="graf graf--p graf-after--li">If you need a base to start your next Ionic 4 app, you can make your next awesome app using <a href="https://store.enappd.com/product/ionic-4-full-app"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Ionic 4 Full App</a></p><figure tabindex="0" contenteditable="false" name="9ef5" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 436px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 62.3%;"></div><img class="graf-image" data-image-id="1*gvh4PRFmNar6eSHB20VJTg.jpeg" data-width="1540" data-height="960" src="https://cdn-images-1.medium.com/max/720/1*gvh4PRFmNar6eSHB20VJTg.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Make your next awesome app with Ionic 4 Full&nbsp;App</figcaption></figure><p name="ce46" class="graf graf--p graf--empty graf-after--figure graf--trailing"><br></p></div></div></section></div></article></main>