Ionic 4 | Geolocation Camera clicking Pictures with Watermarked Latitude & Longitude Coordinates

In this article, we are going to create an Ionic 4 application with a GeoCamera feature. The application will take pictures from device camera then watermark them with current location coordinates with Lattitude and Longitude.

Sometimes users may need this functionality in application to watermark images with any of such information for validation purposes. In this tutorial, we will also discuss a very useful js library WatermarkJS which can be used to marker mark images with text or images.

WatermarkJS quickly does its job with single or multiple images you can check more on the documentation here.

Let’s start with our Geo Camera application.

Create a new Ionic 4 application

Make sure you have latest Ionic CLI version installed (current is v5.1.0). Create a new Ionic 4 app with a blank template. If you already have an application up and running just skip this step.

Install Required Plugins

For this app, we need Camera, Geolocation and WatermarkJS modules. Just run following NPM commands one by one to install them.

Camera

Geolocation

WatermarkJS

 

Add Camera & Geolocation App Module

Camera and Geolocation modules need to be imported in the app.module.ts file after that we will add them in providers array as shown below:

Get Location and Watermark Pictures

In the Home template, we will add a button to call the getPicture method to take pictures from the device camera.

Also, add a <img> tag with template variable to show the coordinate marked image.

Move to home.page.ts file them import Camera, Geolocation and Watermark module, then add in the class constructor

 

the getLatLong method will fetch device coordinates on component load and put details in locationCordinates

 

@ViewChild will access image element to show the updated image.

cameraOption will have the configuration of the camera.

sourceType is CAMERA, it can also be PHOTOLIBRARY to pick photos from device gallery.

takeSnap() will call the getPicture method of camera service to get click picture and convert it into blob object using fetch() method

watermarkImage() will add text on image blob object then set IMG tag with an updated picture.

WatermarkJS plugin can be used to watermark images with image, text with CSS styles and location.

the complete home.page.ts file will look like this:

That’s it now you can check it by running the app on a real device

 

Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

Leave a Reply

avatar
  Subscribe  
Notify of