ra-signature/fesm2015/ra-signature.js

this is a working angular package for signature pad to get the signature in base64

import { __decorate } from 'tslib';
import { ɵɵdefineInjectable, Injectable, EventEmitter, Input, ViewChild, Output, HostListener, Component, NgModule } from '@angular/core';

let RaSignatureService = class RaSignatureService {
    constructor() { }
};
RaSignatureService.ɵprov = ɵɵdefineInjectable({ factory: function RaSignatureService_Factory() { return new RaSignatureService(); }, token: RaSignatureService, providedIn: "root" });
RaSignatureService = __decorate([
    Injectable({
        providedIn: 'root'
    })
], RaSignatureService);

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);

let RaSignatureModule = class RaSignatureModule {
};
RaSignatureModule = __decorate([
    NgModule({
        declarations: [RaSignatureComponent],
        imports: [],
        exports: [RaSignatureComponent]
    })
], RaSignatureModule);

/*
 * Public API Surface of ra-signature
 */

/**
 * Generated bundle index. Do not edit.
 */

export { RaSignatureComponent, RaSignatureModule, RaSignatureService };
//# sourceMappingURL=ra-signature.js.map