Hello Guys, I have an issue with signature pad. I captured an image through camera and saved it on signature pad. However, the image is occupying certain portion of the signature pad. How do I resize image to that of the size of the signature pad?
The following is the attached screen shot of the above.
Grey part is signature pad and image is on the top left corner.
Can anyone please let me know how to resolve it? Or at least give any idea on how it could be done?
hey buddy same issue here not able to set image to that image but if try some image from website link that will fit…but this no idea
Given only what you’ve said here, about all I can suggest is “<canvas>”.
I used canvas too…inside signature pad tags…
hey anyone having solution for how to undo in canvas…am drawing on image which is placed on canvas…so if i draw wrong on image then for undo what is the solution ??
facing same problem…have you got solution ?? please help me
please check this thread. I’ve updated my answer there https://stackoverflow.com/questions/44454463/ionic2-signature-pad-resize-image
var canvas = document.getElementsByTagName(‘canvas’)[0];
this.resizeCanvas(canvas);
public resizeCanvas(canvas) {
var ratio = window.devicePixelRatio || 1;
//canvas.width = canvas.offsetWidth * ratio;
//canvas.height = canvas.offsetHeight * ratio;
canvas.getContext(“2d”).scale(ratio, ratio);
}
Thanks …but where should i placed this above code in my typescript 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;
}
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,
// width: window.screen.width,
// height: window.screen.height,
};
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;
//this.signaturePad.fromDataURL(this.tempPath);
//this.tempPath = this.signaturePad.toDataURL(this.tempPath);
});
} else {
this.lastImage = this.createFileName();
this.tempPath = "data:image/jpeg;base64," + imagePath;
this.selectedImagePath = imagePath;
this.signaturePad.fromDataURL(this.tempPath);
// this.selectedImagePath
this.tempPath = this.signaturePad.toDataURL(this.tempPath);
// let canvas = document.querySelector('canvas');
// this.signaturePad.set('canvasWidth', canvas.this.tempath);
// this.signaturePad.set('canvasHeight', canvas.this.tempath);
// let tempPathheight =500;
// this.signaturePad.set('temPath', tempPathheight);
//this.tempPath.Height = CanvasHeight;
}
}, (err) => {
// this.presentToast(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);
}
}
}
whether i have to create another function and call inside ngafterviewinit()?? where ?
Thanks in advance
You have to place that code in your canvasResize() method
@Geeky_Girl even after adding that function …my image is displaying at same position at 1 corner of signature pad .please check my below code…is it correct ??
canvasResize() {
let canvas = document.querySelector(‘canvas’);
var ratio = window.devicePixelRatio || 1;
canvas.getContext(“2d”).scale(ratio, ratio);
this.signaturePad.set(‘minWidth’, 1);
this.signaturePad.set(‘canvasWidth’, canvas.offsetWidth);
this.signaturePad.set(‘canvasHeight’, canvas.offsetHeight);
}
please check my screen output
Why are you again resetting signature pad height and width in resize canvas? Please remove last three lines in your canvasResize() method and try
okay thanks problem solve…tysm
hey, do you know how to perform undo operation on image of signature-pad…i try but it clear entire image
