ra-signature
Version:
this is a working angular package for signature pad to get the signature in base64
86 lines • 8.2 kB
JavaScript
import { __decorate } from "tslib";
import { Component, Input, ViewChild, HostListener, EventEmitter, Output } from '@angular/core';
let RaSignatureComponent = class RaSignatureComponent {
constructor() {
this.isDrawing = false;
this.strokeColor = "#000000";
this.height = "150";
this.width = "300";
this.imageEvent = new EventEmitter();
}
ngAfterViewInit() {
this.sigPadElement = this.sigPad.nativeElement;
this.context = this.sigPadElement.getContext('2d');
this.context.strokeStyle = this.strokeColor;
}
ngOnInit() {
}
onMouseUp(e) {
this.isDrawing = false;
this.img = this.sigPadElement.toDataURL("image/png");
this.imageEvent.emit(this.img);
}
onMouseDown(e) {
this.isDrawing = true;
const coords = this.relativeCoords(e);
this.context.moveTo(coords.x, coords.y);
}
onMouseMove(e) {
if (this.isDrawing) {
const coords = this.relativeCoords(e);
this.context.lineTo(coords.x, coords.y);
this.context.stroke();
}
}
relativeCoords(event) {
const bounds = event.target.getBoundingClientRect();
const x = event.clientX - bounds.left;
const y = event.clientY - bounds.top;
return { x: x, y: y };
}
clear() {
this.context.clearRect(0, 0, this.sigPadElement.width, this.sigPadElement.height);
this.context.beginPath();
}
};
__decorate([
Input()
], RaSignatureComponent.prototype, "name", void 0);
__decorate([
ViewChild('sigPad')
], RaSignatureComponent.prototype, "sigPad", void 0);
__decorate([
Input()
], RaSignatureComponent.prototype, "strokeColor", void 0);
__decorate([
Input()
], RaSignatureComponent.prototype, "height", void 0);
__decorate([
Input()
], RaSignatureComponent.prototype, "width", void 0);
__decorate([
Output()
], RaSignatureComponent.prototype, "imageEvent", void 0);
__decorate([
HostListener('document:mouseup', ['$event'])
], RaSignatureComponent.prototype, "onMouseUp", null);
RaSignatureComponent = __decorate([
Component({
selector: 'ra-signature',
template: `
<canvas #sigPad width="{{width}}" height="{{height}}" (mousedown)="onMouseDown($event)"
(mousemove)="onMouseMove($event)"></canvas>
<br/>
<button (click)="clear()">clear</button>`,
styles: [`
canvas {
border: 1px solid #000;
}
span {
width: 300px;
}
`]
})
], RaSignatureComponent);
export { RaSignatureComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmEtc2lnbmF0dXJlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL3JhLXNpZ25hdHVyZS8iLCJzb3VyY2VzIjpbImxpYi9yYS1zaWduYXR1cmUuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxTQUFTLEVBQVUsWUFBWSxFQUFpQixZQUFZLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBa0J2SCxJQUFhLG9CQUFvQixHQUFqQyxNQUFhLG9CQUFvQjtJQUFqQztRQVVFLGNBQVMsR0FBRyxLQUFLLENBQUM7UUFHVCxnQkFBVyxHQUFTLFNBQVMsQ0FBQztRQUM5QixXQUFNLEdBQVMsS0FBSyxDQUFDO1FBQ3JCLFVBQUssR0FBUyxLQUFLLENBQUM7UUFDbkIsZUFBVSxHQUFHLElBQUksWUFBWSxFQUFVLENBQUM7SUF1Q3BELENBQUM7SUF0REMsZUFBZTtRQUNiLElBQUksQ0FBQyxhQUFhLEdBQUcsSUFBSSxDQUFDLE1BQU0sQ0FBQyxhQUFhLENBQUM7UUFDL0MsSUFBSSxDQUFDLE9BQU8sR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUNuRCxJQUFJLENBQUMsT0FBTyxDQUFDLFdBQVcsR0FBRyxJQUFJLENBQUMsV0FBVyxDQUFDO0lBQzlDLENBQUM7SUFZRCxRQUFRO0lBRVIsQ0FBQztJQUlELFNBQVMsQ0FBQyxDQUFDO1FBQ1QsSUFBSSxDQUFDLFNBQVMsR0FBRyxLQUFLLENBQUM7UUFDdkIsSUFBSSxDQUFDLEdBQUcsR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDLFNBQVMsQ0FBQyxXQUFXLENBQUMsQ0FBQztRQUNyRCxJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUM7SUFDakMsQ0FBQztJQUVELFdBQVcsQ0FBQyxDQUFDO1FBQ1gsSUFBSSxDQUFDLFNBQVMsR0FBRyxJQUFJLENBQUM7UUFDdEIsTUFBTSxNQUFNLEdBQUcsSUFBSSxDQUFDLGNBQWMsQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUN0QyxJQUFJLENBQUMsT0FBTyxDQUFDLE1BQU0sQ0FBQyxNQUFNLENBQUMsQ0FBQyxFQUFFLE1BQU0sQ0FBQyxDQUFDLENBQUMsQ0FBQztJQUMxQyxDQUFDO0lBRUQsV0FBVyxDQUFDLENBQUM7UUFDWCxJQUFJLElBQUksQ0FBQyxTQUFTLEVBQUU7WUFDbEIsTUFBTSxNQUFNLEdBQUcsSUFBSSxDQUFDLGNBQWMsQ0FBQyxDQUFDLENBQUMsQ0FBQztZQUN0QyxJQUFJLENBQUMsT0FBTyxDQUFDLE1BQU0sQ0FBQyxNQUFNLENBQUMsQ0FBQyxFQUFFLE1BQU0sQ0FBQyxDQUFDLENBQUMsQ0FBQztZQUN4QyxJQUFJLENBQUMsT0FBTyxDQUFDLE1BQU0sRUFBRSxDQUFDO1NBRXZCO0lBQ0gsQ0FBQztJQUVPLGNBQWMsQ0FBQyxLQUFLO1FBQzFCLE1BQU0sTUFBTSxHQUFHLEtBQUssQ0FBQyxNQUFNLENBQUMscUJBQXFCLEVBQUUsQ0FBQztRQUNwRCxNQUFNLENBQUMsR0FBRyxLQUFLLENBQUMsT0FBTyxHQUFHLE1BQU0sQ0FBQyxJQUFJLENBQUM7UUFDdEMsTUFBTSxDQUFDLEdBQUcsS0FBSyxDQUFDLE9BQU8sR0FBRyxNQUFNLENBQUMsR0FBRyxDQUFDO1FBQ3JDLE9BQU8sRUFBRSxDQUFDLEVBQUUsQ0FBQyxFQUFFLENBQUMsRUFBRSxDQUFDLEVBQUUsQ0FBQztJQUN4QixDQUFDO0lBRUQsS0FBSztRQUNILElBQUksQ0FBQyxPQUFPLENBQUMsU0FBUyxDQUFDLENBQUMsRUFBRSxDQUFDLEVBQUUsSUFBSSxDQUFDLGFBQWEsQ0FBQyxLQUFLLEVBQUUsSUFBSSxDQUFDLGFBQWEsQ0FBQyxNQUFNLENBQUMsQ0FBQztRQUNsRixJQUFJLENBQUMsT0FBTyxDQUFDLFNBQVMsRUFBRSxDQUFDO0lBQzNCLENBQUM7Q0FDRixDQUFBO0FBakRVO0lBQVIsS0FBSyxFQUFFO2tEQUFjO0FBQ0Q7SUFBcEIsU0FBUyxDQUFDLFFBQVEsQ0FBQztvREFBUTtBQU1uQjtJQUFSLEtBQUssRUFBRTt5REFBK0I7QUFDOUI7SUFBUixLQUFLLEVBQUU7b0RBQXNCO0FBQ3JCO0lBQVIsS0FBSyxFQUFFO21EQUFxQjtBQUNuQjtJQUFULE1BQU0sRUFBRTt3REFBeUM7QUFPbEQ7SUFEQyxZQUFZLENBQUMsa0JBQWtCLEVBQUUsQ0FBQyxRQUFRLENBQUMsQ0FBQztxREFLNUM7QUEzQlUsb0JBQW9CO0lBaEJoQyxTQUFTLENBQUM7UUFDVCxRQUFRLEVBQUUsY0FBYztRQUN4QixRQUFRLEVBQUU7Ozs7MkNBSStCO2lCQUNoQzs7Ozs7OztHQU9SO0tBQ0YsQ0FBQztHQUNXLG9CQUFvQixDQXVEaEM7U0F2RFksb0JBQW9CIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgVmlld0NoaWxkLCBPbkluaXQsIEhvc3RMaXN0ZW5lciwgQWZ0ZXJWaWV3SW5pdCwgRXZlbnRFbWl0dGVyLCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAncmEtc2lnbmF0dXJlJyxcbiAgdGVtcGxhdGU6IGBcbiAgPGNhbnZhcyAjc2lnUGFkIHdpZHRoPVwie3t3aWR0aH19XCIgaGVpZ2h0PVwie3toZWlnaHR9fVwiIChtb3VzZWRvd24pPVwib25Nb3VzZURvd24oJGV2ZW50KVwiXG4gIChtb3VzZW1vdmUpPVwib25Nb3VzZU1vdmUoJGV2ZW50KVwiPjwvY2FudmFzPlxuICA8YnIvPlxuICA8YnV0dG9uIChjbGljayk9XCJjbGVhcigpXCI+Y2xlYXI8L2J1dHRvbj5gLFxuICBzdHlsZXM6IFtgXG4gIGNhbnZhcyB7XG4gICAgYm9yZGVyOiAxcHggc29saWQgIzAwMDtcbiAgfVxuICBzcGFuIHtcbiAgICB3aWR0aDogMzAwcHg7XG4gIH1cbiAgYF1cbn0pXG5leHBvcnQgY2xhc3MgUmFTaWduYXR1cmVDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIEFmdGVyVmlld0luaXQge1xuICBuZ0FmdGVyVmlld0luaXQoKTogdm9pZCB7XG4gICAgdGhpcy5zaWdQYWRFbGVtZW50ID0gdGhpcy5zaWdQYWQubmF0aXZlRWxlbWVudDtcbiAgICB0aGlzLmNvbnRleHQgPSB0aGlzLnNpZ1BhZEVsZW1lbnQuZ2V0Q29udGV4dCgnMmQnKTtcbiAgICB0aGlzLmNvbnRleHQuc3Ryb2tlU3R5bGUgPSB0aGlzLnN0cm9rZUNvbG9yO1xuICB9XG4gIEBJbnB1dCgpIG5hbWU6IHN0cmluZztcbiAgQFZpZXdDaGlsZCgnc2lnUGFkJykgc2lnUGFkO1xuICBzaWdQYWRFbGVtZW50O1xuICBjb250ZXh0O1xuICBpc0RyYXdpbmcgPSBmYWxzZTtcbiAgaW1nO1xuXG4gIEBJbnB1dCgpIHN0cm9rZUNvbG9yOiBzdHJpbmc9XCIjMDAwMDAwXCI7XG4gIEBJbnB1dCgpIGhlaWdodDogc3RyaW5nPVwiMTUwXCI7XG4gIEBJbnB1dCgpIHdpZHRoOiBzdHJpbmc9XCIzMDBcIjtcbiAgQE91dHB1dCgpIGltYWdlRXZlbnQgPSBuZXcgRXZlbnRFbWl0dGVyPHN0cmluZz4oKTtcbiAgbmdPbkluaXQoKSB7XG4gICBcbiAgfVxuXG5cbiAgQEhvc3RMaXN0ZW5lcignZG9jdW1lbnQ6bW91c2V1cCcsIFsnJGV2ZW50J10pXG4gIG9uTW91c2VVcChlKSB7XG4gICAgdGhpcy5pc0RyYXdpbmcgPSBmYWxzZTtcbiAgICB0aGlzLmltZyA9IHRoaXMuc2lnUGFkRWxlbWVudC50b0RhdGFVUkwoXCJpbWFnZS9wbmdcIik7XG4gICAgdGhpcy5pbWFnZUV2ZW50LmVtaXQodGhpcy5pbWcpO1xuICB9XG5cbiAgb25Nb3VzZURvd24oZSkge1xuICAgIHRoaXMuaXNEcmF3aW5nID0gdHJ1ZTtcbiAgICBjb25zdCBjb29yZHMgPSB0aGlzLnJlbGF0aXZlQ29vcmRzKGUpO1xuICAgIHRoaXMuY29udGV4dC5tb3ZlVG8oY29vcmRzLngsIGNvb3Jkcy55KTtcbiAgfVxuXG4gIG9uTW91c2VNb3ZlKGUpIHtcbiAgICBpZiAodGhpcy5pc0RyYXdpbmcpIHtcbiAgICAgIGNvbnN0IGNvb3JkcyA9IHRoaXMucmVsYXRpdmVDb29yZHMoZSk7XG4gICAgICB0aGlzLmNvbnRleHQubGluZVRvKGNvb3Jkcy54LCBjb29yZHMueSk7XG4gICAgICB0aGlzLmNvbnRleHQuc3Ryb2tlKCk7XG4gICAgICBcbiAgICB9XG4gIH1cblxuICBwcml2YXRlIHJlbGF0aXZlQ29vcmRzKGV2ZW50KSB7XG4gICAgY29uc3QgYm91bmRzID0gZXZlbnQudGFyZ2V0LmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpO1xuICAgIGNvbnN0IHggPSBldmVudC5jbGllbnRYIC0gYm91bmRzLmxlZnQ7XG4gICAgY29uc3QgeSA9IGV2ZW50LmNsaWVudFkgLSBib3VuZHMudG9wO1xuICAgIHJldHVybiB7IHg6IHgsIHk6IHkgfTtcbiAgfVxuXG4gIGNsZWFyKCkge1xuICAgIHRoaXMuY29udGV4dC5jbGVhclJlY3QoMCwgMCwgdGhpcy5zaWdQYWRFbGVtZW50LndpZHRoLCB0aGlzLnNpZ1BhZEVsZW1lbnQuaGVpZ2h0KTtcbiAgICB0aGlzLmNvbnRleHQuYmVnaW5QYXRoKCk7XG4gIH1cbn1cbiJdfQ==