Ionic2签名板调整图像大小

Question

通过相机拍摄图像并将其保存到签名板。图像占据签名板上的某些部分。如何将图像大小调整为签名板的大小。

以下是将图像保存到签名板后的屏幕截图。灰色部分是签名板。图像位于左上角。

有些人可以告诉我如何调整图像大小或者至少告诉如何获得图像的高度和宽度？签名垫尺寸是静态给出的

Answer 1

想要再次编辑标志的人不是一个好的解决方案。我通过将图像重新绘制到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);
    }

Answer 2

我通过做一些解决方法解决了这个问题。我们需要更改设备像素比率而不是画布大小。如下所示。

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