fromDataURL
λ©μλκ° ν½μ
λΉμ¨μ΄ 1μ΄ μλ μ₯μΉ(μ: λμ DPIλ₯Ό κ°μ§ λͺ¨λ°μΌ μ₯μΉ)μμ μ΄μνκ² λμνλ€λ κ²μ λ°κ²¬νμ΅λλ€.
λμ DPI νλ©΄ μ²λ¦¬κ° λ
Όμ λλ README μ
κ·Έλ¬λ μΊλ²μ€κ° κ³ μ λ ν¬κΈ°μΈ κ²½μ° 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λ,
κ³ λ§μμ ... κ³ κ΅°λΆν¬νκ³ λ΄ κ°λ μ§μλ¬Έμμ μ루μ
μ μ¬μ©νμ΅λλ€.
μλ νμΈμ @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 μ‘°μ¬μ κ°μ¬λ립λλ€. μκ°μ μ μ½ν μ μμμ΅λλ€.
νμ¬λ‘μλ μλμΌλ‘ μΊλ²μ€λ₯Ό μ±μ°λ λ°©λ²μ λλ€.