CODEWITHSUNDEEP
angulartypescriptionic2angular2-directivessignaturepad
Iris_geek
Iris_geek

Reputation: 393

Ionic2 Signature Pad resize image

Am capturing an image through camera and saving it to signature pad. The image is occupying certain portion on signature pad. How to resize image to that of the size of signature pad.

Here is the screen shot of image after saving it to signature pad. Grey part is signature pad. Image is to the top left corner.

Can some body please tell how can I resize image or at least tell how to get height and width of image? Signature pad dimensions are statically given

enter image description here

Upvotes: 0

Views: 1701

Answers (2)

jagan reddy
jagan reddy

Reputation: 71

people who want to edit the sign back again its not the good solution. I fixed by redrawing image into signPad.

    this.signaturePad.clear();
    //If it is already signed load sign into signPad. 
    if(this.signatureData) {
        let canvas = document.getElementsByTagName('canvas')[0];
        let img = document.createElement("img");
        img.src = this.signatureData;
        canvas.getContext("2d").drawImage(img, 0, 0);
    }

Upvotes: 1

Iris_geek
Iris_geek

Reputation: 393

I've got it resolved by doing some workaround. We need to change the device pixel ratio and not the canvas size. Something like the following.

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);
}

enter image description here

Upvotes: 0

Related Questions