项目作者: jeremyj11

项目描述 :
Angular8 wrapper for szimek/signature_pad
高级语言: TypeScript
项目地址: git://github.com/jeremyj11/ngx-signaturepad2.git
创建时间: 2020-02-29T02:04:33Z
项目社区:https://github.com/jeremyj11/ngx-signaturepad2

开源协议:

下载


NgxSignaturepad2

Angular 12 component for szimek/signature_pad.

Install

npm install ngx-signaturepad2 --save

Reference Implementation

Usage example

API is identical to szimek/signature_pad.

Inputs:

  • options are as per szimek/signature_pad
  • width: width of the canvas (px)
  • height: height of the canvas (px)
  1. // import into app module
  2. import { NgxSignaturepadModule } from 'ngx-signaturepad2';
  3. ...
  4. @NgModule({
  5. declarations: [
  6. AppComponent
  7. ],
  8. imports: [
  9. BrowserModule,
  10. NgxSignaturepadModule
  11. ],
  12. providers: [],
  13. bootstrap: [AppComponent]
  14. })
  15. // then import for use in a component
  16. import { Component, ViewChild } from '@angular/core';
  17. @Component({
  18. selector: 'app-root',
  19. templateUrl: './app.component.html',
  20. styleUrls: ['./app.component.scss']
  21. })
  22. export class AppComponent {
  23. @ViewChild('signaturePad', { static: false }) signaturePad;
  24. width: number = 600;
  25. height: number = 300;
  26. options: any = null;
  27. constructor() { }
  28. isEmpty() {
  29. console.log('is empty', this.signaturePad.isEmpty());
  30. }
  31. savePng() {
  32. const data = this.signaturePad.toDataURL();
  33. console.log(data);
  34. }
  35. saveJpg() {
  36. const data = this.signaturePad.toDataURL("image/jpeg");
  37. console.log(data);
  38. }
  39. saveSvg() {
  40. const data = this.signaturePad.toDataURL("image/svg+xml");
  41. console.log(data);
  42. }
  43. saveArray() {
  44. const data = this.signaturePad.toData();
  45. console.log(data);
  46. console.log(JSON.stringify(data));
  47. }
  48. clear() {
  49. console.log('clear');
  50. this.signaturePad.clear();
  51. }
  52. changeOptions() {
  53. console.log('options changed');
  54. this.options = {
  55. minWidth: 5,
  56. maxWidth: 10,
  57. penColor: "rgb(66, 133, 244)"
  58. };
  59. }
  60. setSigArray() {
  61. let jsonString = '[{"color":"rgb(66, 133, 244)","points":[{"time":1582940095394,"x":267,"y":116}]},{"color":"rgb(66, 133, 244)","points":[{"time":1582940096537,"x":297,"y":115}]},{"color":"rgb(66, 133, 244)","points":[{"time":1582940097774,"x":239,"y":135},{"time":1582940097853,"x":240,"y":141},{"time":1582940097885,"x":242,"y":148},{"time":1582940097918,"x":244,"y":153},{"time":1582940097983,"x":248,"y":158},{"time":1582940098033,"x":252,"y":162},{"time":1582940098064,"x":257,"y":165},{"time":1582940098112,"x":264,"y":167},{"time":1582940098144,"x":271,"y":167},{"time":1582940098177,"x":284,"y":168},{"time":1582940098210,"x":295,"y":168},{"time":1582940098244,"x":302,"y":165},{"time":1582940098277,"x":309,"y":161},{"time":1582940098311,"x":315,"y":156},{"time":1582940098343,"x":322,"y":148},{"time":1582940098376,"x":325,"y":142},{"time":1582940098392,"x":330,"y":136},{"time":1582940098442,"x":333,"y":131}]}]';
  62. this.signaturePad.fromData(JSON.parse(jsonString));
  63. }
  64. //
  65. setSigString() {
  66. this.signaturePad.fromDataURL("data:image/png;base64,iVBORw...");
  67. }
  68. }

HTML:

```html