hello all, am making one application in which task is drawing on image …so what i already done is
- 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>
.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 )
