ra-signature/fesm5/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';

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

var RaSignatureComponent = /** @class */ (function () {
    function RaSignatureComponent() {
        this.isDrawing = false;
        this.strokeColor = "#000000";
        this.height = "150";
        this.width = "300";
        this.imageEvent = new EventEmitter();
    }
    RaSignatureComponent.prototype.ngAfterViewInit = function () {
        this.sigPadElement = this.sigPad.nativeElement;
        this.context = this.sigPadElement.getContext('2d');
        this.context.strokeStyle = this.strokeColor;
    };
    RaSignatureComponent.prototype.ngOnInit = function () {
    };
    RaSignatureComponent.prototype.onMouseUp = function (e) {
        this.isDrawing = false;
        this.img = this.sigPadElement.toDataURL("image/png");
        this.imageEvent.emit(this.img);
    };
    RaSignatureComponent.prototype.onMouseDown = function (e) {
        this.isDrawing = true;
        var coords = this.relativeCoords(e);
        this.context.moveTo(coords.x, coords.y);
    };
    RaSignatureComponent.prototype.onMouseMove = function (e) {
        if (this.isDrawing) {
            var coords = this.relativeCoords(e);
            this.context.lineTo(coords.x, coords.y);
            this.context.stroke();
        }
    };
    RaSignatureComponent.prototype.relativeCoords = function (event) {
        var bounds = event.target.getBoundingClientRect();
        var x = event.clientX - bounds.left;
        var y = event.clientY - bounds.top;
        return { x: x, y: y };
    };
    RaSignatureComponent.prototype.clear = function () {
        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: "\n  <canvas #sigPad width=\"{{width}}\" height=\"{{height}}\" (mousedown)=\"onMouseDown($event)\"\n  (mousemove)=\"onMouseMove($event)\"></canvas>\n  <br/>\n  <button (click)=\"clear()\">clear</button>",
            styles: ["\n  canvas {\n    border: 1px solid #000;\n  }\n  span {\n    width: 300px;\n  }\n  "]
        })
    ], RaSignatureComponent);
    return RaSignatureComponent;
}());

var RaSignatureModule = /** @class */ (function () {
    function RaSignatureModule() {
    }
    RaSignatureModule = __decorate([
        NgModule({
            declarations: [RaSignatureComponent],
            imports: [],
            exports: [RaSignatureComponent]
        })
    ], RaSignatureModule);
    return RaSignatureModule;
}());

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

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

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