Ionic2 Signature Pad 调整图像大小答案

【问题标题】：Ionic2 Signature Pad resize imageIonic2 Signature Pad 调整图像大小
【发布时间】：2017-11-11 06:36:09
【问题描述】：

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

这是图像保存到签名板后的屏幕截图。灰色部分是签名板。图像在左上角。

有人可以告诉我如何调整图像大小或至少告诉如何获取图像的高度和宽度吗？签名板尺寸是静态给定的

【问题讨论】：

标签： angular typescript ionic2 angular2-directives signaturepad

【解决方案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);
    }

【讨论】：

【解决方案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);
}

【讨论】：