How to display image(taking with camera) on canvas (signature pad)

hello all, am making one application in which task is drawing on image …so what i already done is

  1. i create canvas
    2)using signature pad am drawing on canvas

but now am taking picture through camera (using camera plugin ) and i want to display that images on canvas …but am not able to display or image is not display on canvas …please help me

see below my code please :
signature module :signature.ts file

import { Component, ViewChild, Renderer } from ‘@angular/core’;
import { NavController} from ‘ionic-angular’;
import {SignaturePad} from ‘angular2-signaturepad/signature-pad’;
import {HomePage} from ‘…/home/home’;
import { Camera, CameraOptions } from ‘@ionic-native/camera’;
@Component({
selector: ‘page-signature’,
templateUrl: ‘signature.html’,
})
export class SignaturePage {
@ViewChild(SignaturePad) public signaturePad : SignaturePad;
public photos : any;
base64Image:any;
canvasElement: any;

public signaturePadOptions : Object = {
‘minWidth’: 2,
‘canvasWidth’: 340,
‘canvasHeight’: 200
};
public signatureImage : string;

constructor(public navCtrl: NavController,private camera : Camera,public renderer: Renderer) {
}

//Other Functions
ngAfterViewInit() {
this.signaturePad.clear();
this.canvasResize();
}
ngOnInit() {
this.photos = [];
}

drawCancel() {
this.navCtrl.push(HomePage);
}

drawComplete() {
this.signatureImage = this.signaturePad.toDataURL();
this.navCtrl.push(HomePage, {signatureImage: this.signatureImage});
}

drawClear() {
this.signaturePad.clear();
}

canvasResize() {
let canvas = document.querySelector(‘canvas’);
this.signaturePad.set(‘minWidth’, 1);
this.signaturePad.set(‘canvasWidth’, canvas.offsetWidth);
this.signaturePad.set(‘canvasHeight’, canvas.offsetHeight);
}
takePhoto() {

var image = new Image();
let ctx = this.canvasElement.getContext('2d');

    const options : CameraOptions = {
      quality: 50, // picture quality
      
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE
    }
    this.camera.getPicture(options) .then((imageData) => {
        this.base64Image = "data:image/jpeg;base64," + imageData;
        image.src=this.base64Image;
         this.photos.push(this.base64Image);
         this.photos.reverse();
        // ctx.drawImage(image, 0, 0, image.width,image.height,     // source rectangle
        //   0, 0,  this.canvasElement.width, this.canvasElement.height);

      }, (err) => {
        console.log(err);
      });
  }

}

.html file
ion-header>

signature    Cancel clear done resize

.scss file

page-signature {
signature-pad {
canvas {
border: dashed 1px #cccccc;
width: 100%; height: 350px;
position:fixed;
top:2;
}

      }
      
      .send
{
    position: fixed;
    bottom: 0;
    top:10;
    left:0;
}
    }

…plugin use :camera plugin …and module use signaturepad …please check my code and tell me how can display image on canvas ( image already taken through camera )

my html file>

signature    Cancel clear done resize

…please help me to solve this problem

<img src= photo *ngIf="photo"/>

what is that?

src is a PATH & name to an image file.

see this example
https://devdactic.com/complete-image-guide-ionic/

u have to write the image to some storage media

@sdetweil thanks but am not storing image …i want to display that images
directly on canvas …as u suggest that link…in it filestorage they used…i
don’t want to store that image

i hear you… but… I don’t think there are any html primitives to draw graphics directly, or render a bitmap.
I think they all have to come from a ‘file’, even it just in cache

okay thanks if you found solution please help me…am facing so much problem

you will have to write the images to files and then link to them… and cleanup them up later. i don’t know of another way

but am taking images through camera …is it possible to write that images to file …i want to display images directly on canvas or signature pad…and draw on it and then send to server??

must be a way, else there would never be any pictures shared with anyone

okay thank you so much for solution and chatting conversion

ideas, this plugin apparently saves the picture before returning
https://devdactic.com/ionic-2-images/

thanks but after storing images how can i display that image on canvas ?..this above tutorial only help to capture store and then upload and then how ??

you get the file path the image and use that in the img src="{{path}}"

and the file plugin will let you LIST the images in a location and get their name (and u can add the path)

okay thanks i will try this solution

@sdetweil am able to display image on canvas area but not able to drawn on image …drawing only on canvas …not on image … i follow this solution… Selecting file from camera display on signature pad …it will display image on canvas…but not drawing on it…can i show you my code …can you please check it ??

what do you mean by draw on image? you mean edit image?

yes , like drawing a or b or any number on image

see this


and this

i don’t know how to do this, I am just google searching

hey @sdtwell … now am able to draw on image using signature pad…but when am perform undo operation and some drawing on image…it delete or remove image as well along with other draw things…can i show you my code u just check my code please undo operation function ??