Drawing on existing/new photos


I’m looking for a library / libraries to do the following:

  • (take a new photo with device camera)
  • import multiple images from photo gallery
  • free positioning of the photos on a canvas
  • possibility to put images on of top of each other
  • possibility to draw a path (multiple connected straight lines) on top of the photos
  • annotate with text
  • export result back to photo gallery / pdf … in order to upload the drawing to a server

Do you know any library or multiple libraries that I could use to achieve all of the above?

Thank in advance.

1 Like

To take a photo, this works for me with the cordova-plugin-camera that comes with a standard cordova install with Ionic2.

import { Camera, ImagePicker } from 'ionic-native';

takePhoto() {
        destinationType: navigator.camera.DestinationType.DATA_URL,
        sourceType: navigator.camera.PictureSourceType.CAMERA,
        allowEdit: false,
        encodingType: navigator.camera.EncodingType.JPEG,
        targetWidth: 300,
        targetHeight: 300,
        quality: 75,
        saveToPhotoAlbum: false
    }).then(imageData => {
        this.zone.run(() => {
            this.base64Image = "data:image/jpeg;base64," + imageData;
    }, error => {
        console.log("ERROR -> " + JSON.stringify(error));
        alert("ERROR: " + JSON.stringify(error));

just be aware that cordova-plugin-camera doesn’t work in a browser. I build an apk via cordova build and test it on my phone.

I am working on the ImagePicker, and can get it to go to the gallery on my phone with the following code. But I cannot get it to pass the image to the display once picked yet.

pickImage() {
        maximumImagesCount: 2,
        width: 300,
        height: 300,
        quality: 75
    }).then((results) => {
        this.toDataUrl(results[0], function(base64Img) {
            this.base64Image = "data:image/jpeg;base64," + base64Img;
        // this.getFileContentAsBase64(results[0], function (base64Image) {
        //     this.base64Image = "data:image/jpeg;base64," + base64Image;
        // });
    }, (error) => {
        console.log("ERROR -> " + JSON.stringify(error));
        alert("ERROR: " + JSON.stringify(error));
toDataUrl(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';
    xhr.onload = function () {
        var reader = new FileReader();
        reader.onloadend = function () {
    xhr.open('GET', url);


    <img src="{{ base64Image }}" />

Next, I cannot seem to get an image cropper to work, I have tried various, but am still working on it.

Hope this helps you.

I think to do that you will need a third party library that takes advantage of HTML5 Canvas Element… Then there is a cordova plugin that converts HTML5 Canvas to JPEG and store it on the device.


Thank you for your reply.

Taking a picture is indeed the easy part and I already knew the plugin. That is also why it was between ( ).

The difficult part seems to be all the rest.

Technicians go on inspection and they need to document their findings. I am creation an app for their schedule and to give them the ability to enter the questionnaire on a tablet.
Whenever they encounter some problem they have to take a picture and highlight the issue. Therefore the most important part is the ability to combine multiple pictures (might be overlaps) and the ability to draw a path on top of the pictures. The final result should be sent to the server.

Yes, I only gave you some basic stuff, I am pretty new to Ionic, I wish I knew more.

What do you use to crop your image once you have already captured it? Are you working with a base64 image?


Until now I have never used the cordova camera plugin, but this is the first thing you find when you search for taking pictures with Ionic. :slight_smile:

1 Like

hi, did you find anything to do this? i’m trying to make an application with the same functionalities that you have mentioned. i’m completely lost because i don’t know where to search. thank you

@mwauters hey,you got solution for how to draw text or number on image in ionic ? please help me to solve this problem