Signature_pad: 高 DPI 屏幕设备的 fromDataURL 错误

创建于 2016-03-10  ·  3评论  ·  资料来源: szimek/signature_pad

描述

我发现fromDataURL方法在像素比不为 1 的设备上表现很奇怪,例如在具有高 DPI 的移动设备上。
我知道自述文件中讨论处理高 DPI 屏幕的
但是,在画布大小固定的情况下,我仍然可以使用fromDataURL重现问题。 我相信图像的这种缩放是这个问题的原因。
您可以使用此 JSFiddle重现此问题。

重现步骤

  1. 像素比不为 1的设备上打开上面描述中链接的 JSFiddled 并在签名板上写一些东西。
  2. 单击保存。
    1_after_save
  3. 单击编辑。
  4. 在本子上再写一些。
    2_before_cancel
  5. 点击取消

    预期结果

签名板应该与第 2 步之后的样子完全一样。

实际结果

签名板上的更改已恢复,但图像已被缩放,因此看起来与步骤 2 之后的板子上的不同。
3_after_cancel

最有用的评论

你好,

我也偶然发现了这个问题。 这是意料之外的行为。 我认为我们应该选择是否要进行此类修改(因此默认为先前行为的第二个参数应该没问题)。 主要是因为在其他任何地方都不会自动完成类似的操作。

非常感谢@siggifv的调查,您为我节省了一些时间。

手动填充画布是目前的方法:

var image = new Image();
signaturePad.clear();
image.src = dataURL;
image.onload = function () {
    signatureCanvas = document.querySelector("#signature-pad");
    signatureCanvas.getContext("2d").drawImage(image, 0, 0, width, height);
};
this.signaturePad._isEmpty = false;

所有3条评论

你好,

我也偶然发现了这个问题。 这是意料之外的行为。 我认为我们应该选择是否要进行此类修改(因此默认为先前行为的第二个参数应该没问题)。 主要是因为在其他任何地方都不会自动完成类似的操作。

非常感谢@siggifv的调查,您为我节省了一些时间。

手动填充画布是目前的方法:

var image = new Image();
signaturePad.clear();
image.src = dataURL;
image.onload = function () {
    signatureCanvas = document.querySelector("#signature-pad");
    signatureCanvas.getContext("2d").drawImage(image, 0, 0, width, height);
};
this.signaturePad._isEmpty = false;

嗨杜拉斯吉,
非常感谢......一直在努力并在我的角度指令中使用您的解决方案。

@durasj 非常感谢,完美运行

我的示例与访问器的writeValue

  writeValue(value: string): void {
    if (!value) {
      this.signaturePad.clear();
      return;
    }
   this.value = value;
   this._drawValueToCanvas();
   this.cdr.markForCheck();
  }

  /** Draw from image according to retina or some devices  */
  _drawValueToCanvas() {
    if (this.canvas != null) {
      const image = new Image();
      this.signaturePad.clear();
      image.src = this.value;
      image.onload = () =>
        this.canvas
          .getContext('2d')
          .drawImage(image, 0, 0, 300, 120);
      this.signaturePad._isEmpty = false;
    }
  }
此页面是否有帮助?
0 / 5 - 0 等级

相关问题

derUli picture derUli  ·  3评论

Emmark picture Emmark  ·  4评论

rmmackay picture rmmackay  ·  7评论

hostcia picture hostcia  ·  6评论

lowe493 picture lowe493  ·  5评论