我发现fromDataURL
方法在像素比不为 1 的设备上表现很奇怪,例如在具有高 DPI 的移动设备上。
我知道自述文件中讨论处理高 DPI 屏幕的
但是,在画布大小固定的情况下,我仍然可以使用fromDataURL
重现问题。 我相信图像的这种缩放是这个问题的原因。
您可以使用此 JSFiddle重现此问题。
签名板应该与第 2 步之后的样子完全一样。
签名板上的更改已恢复,但图像已被缩放,因此看起来与步骤 2 之后的板子上的不同。
你好,
我也偶然发现了这个问题。 这是意料之外的行为。 我认为我们应该选择是否要进行此类修改(因此默认为先前行为的第二个参数应该没问题)。 主要是因为在其他任何地方都不会自动完成类似的操作。
非常感谢@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;
}
}
最有用的评论
你好,
我也偶然发现了这个问题。 这是意料之外的行为。 我认为我们应该选择是否要进行此类修改(因此默认为先前行为的第二个参数应该没问题)。 主要是因为在其他任何地方都不会自动完成类似的操作。
非常感谢@siggifv的调查,您为我节省了一些时间。
手动填充画布是目前的方法: