hello everyone…am making one application in which task is …drawing on image so i use signature -pad and on signature-pad am setting image(taking through camera ) …am able to draw on image …but now problem is that image display from camera is too small and not equal to signature-pad canvas size…so am trying to changing the size of image but image size not changed please …help me to solve above problem
my signature.ts file code
import { Component, ViewChild, Renderer } from '@angular/core';
import { NavController} from 'ionic-angular';
import {SignaturePad} from 'angular2-signaturepad/signature-pad';
import { Platform } from 'ionic-angular';
import {HomePage} from '../home/home';
import { Camera, CameraOptions } from '@ionic-native/camera';
import { Diagnostic } from '@ionic-native/diagnostic';
import { FilePath } from '@ionic-native/file-path';
import { ToastController } from 'ionic-angular';
import { ImageViewerController } from 'ionic-img-viewer';
@Component({
selector: 'page-signature',
templateUrl: 'signature.html',
})
export class SignaturePage {
@ViewChild(SignaturePad) public signaturePad : SignaturePad;
//_imageViewerCtrl: ImageViewerController;
public photos : any;
base64Image:any;
//public tempPath:string;
lastImage;
imagePath;
selectedImagePath;
targetWidth :400;
targetHeight:400;
// currentColour: string = '#1abc9c';
// availableColours: any;
// width: 5000;
// height: 5000;
// width: 1280;
// height: 1280;
//prototype: any
//340
//200
// canvasElement: any;
// CANVAS_width= 500;
// CANVAS_height= 700;
public signaturePadOptions : Object = {
'minWidth': 2,
'canvasWidth': 340,
'canvasHeight': 200,
'quality': 100,
'penColor': "rgb(66, 133, 244)",
//sourceType:sourceType,
// destinationType: DestinationType,
'destinationType': this.camera.DestinationType.DATA_URL,
'saveToPhotoAlbum': true,
'correctOrientation': true,
//mediaType: 2
'encodingType': this.camera.EncodingType.JPEG,
'mediaType': this.camera.MediaType.PICTURE,
'allowEdit' : true,
'targetHeight':800,
'targetwidth' :800,
// 'width': window.screen.width,
// 'height': window.screen.height,
// 'width': 5000,
// 'height': 5000,
};
public signatureImage : string;
public tempPath : string;
constructor(public navCtrl: NavController,private camera : Camera,public renderer: Renderer,private diagnostic: Diagnostic,public platform:Platform,private filePath: FilePath,private toastCtrl: ToastController,imageViewerCtrl: ImageViewerController) {
//this._imageViewerCtrl = imageViewerCtrl;
}
//Other Functions
ngAfterViewInit() {
console.log("signature on conole");
this.signaturePad.clear();
// this.canvasElement = this.canvas.nativeElement;
this.canvasResize();
// this.drawComplete();
}
ngOnInit() {
this.photos = [];
}
drawCancel() {
this.navCtrl.push(HomePage);
}
drawComplete() {
this.tempPath = this.signaturePad.toDataURL();
console.log(this.tempPath);
this.navCtrl.push(HomePage, {tempPath: this.tempPath});
}
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);
}
public takePicture(sourceType, DestinationType) {
var options = {
quality: 100,
//sourceType: sourceType,
// destinationType: DestinationType,
destinationType: this.camera.DestinationType.DATA_URL,
saveToPhotoAlbum: true,
correctOrientation: true,
//mediaType: 2,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
// allowEdit : true,
//height:100,
//width:200,
targetWidth :1000,
targetHeight:1000,
};
this.camera.getPicture(options).then((imagePath) => {
if (this.platform.is('android') && sourceType === this.camera.PictureSourceType.PHOTOLIBRARY) {
this.filePath.resolveNativePath(imagePath)
.then(filePath => {
this.lastImage = this.createFileName();
this.tempPath = "data:image/jpeg;base64," + imagePath;
this.selectedImagePath = imagePath;
});
} else {
this.lastImage = this.createFileName();
this.tempPath = "data:image/jpeg;base64," + imagePath;
this.selectedImagePath = imagePath;
this.signaturePad.fromDataURL(this.tempPath);
}
}, (err) => {
console.log(err);
});
}
private createFileName() {
var d = new Date(),
n = d.getTime(),
newFileName = n + ".jpg";
return newFileName;
}
perform()
{
var data = this.signaturePad.toData();
if (data) {
data.pop(); // remove the last dot or line
this.signaturePad.fromData(data);
}
}
}
my signature.html file code
signature
<signature-pad [options]=“signaturePadOptions” id=“signatureCanvas” >
…
.csss file code
page-signature {
signature-pad {
canvas {
border: dashed 1px #cccccc;
//width: 100%;
//height: 350px;
// width: 100%;
height: 300px;
width: 80%;
margin-left: 20px;
position:fixed;
// top:2;
//margin-bottom:100px;
margin-top:50px;
//left:2;
}
}
.ram{
// position:fixed;
margin-top: 28px;
height:300px ;
width:92%;
margin-left: 12px;
//margin-bottom: 2px;
}
.ghi
{
// position: fixed;
//bottom: 0;
// top:10;
margin-top:17;
left:0;
bottom: 2;
// height:400px ;
}
.sendbox
{
position: fixed;
//bottom: 20px;
margin-bottom:15px;
margin-top: 50px;
//margin-left:2px;
//margin-right:0px;
}
// .slide-zoom {
// background: #e6e6e6;
// }
// ion-slide.swiper-slide {
// left: 25%;
// }
// // .thumb-img {
// // padding: 10px;
// // }
}
please help me to solve this small size image display problem
