angular - Ionic2 Signature Pad 调整图像大小

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