{"id":15018575,"url":"https://github.com/nativescript-community/nativescript-drawingpad","last_synced_at":"2025-04-13T05:27:02.645Z","repository":{"id":41391144,"uuid":"51269997","full_name":"nativescript-community/nativescript-drawingpad","owner":"nativescript-community","description":":pencil: NativeScript plugin to provide a way to capture any drawing (signatures are a common use case) from the device","archived":false,"fork":false,"pushed_at":"2022-07-01T09:54:03.000Z","size":11881,"stargazers_count":90,"open_issues_count":12,"forks_count":32,"subscribers_count":19,"default_branch":"master","last_synced_at":"2025-04-03T01:04:50.329Z","etag":null,"topics":["android","drawing","ios","nativescript","nativescript-plugin","signatures"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nativescript-community.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-02-07T22:40:09.000Z","updated_at":"2025-04-02T07:01:11.000Z","dependencies_parsed_at":"2022-08-29T12:50:38.364Z","dependency_job_id":null,"html_url":"https://github.com/nativescript-community/nativescript-drawingpad","commit_stats":null,"previous_names":["bradmartin/nativescript-drawingpad","bradmartin/nativescript-signaturepad"],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Fnativescript-drawingpad","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Fnativescript-drawingpad/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Fnativescript-drawingpad/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Fnativescript-drawingpad/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nativescript-community","download_url":"https://codeload.github.com/nativescript-community/nativescript-drawingpad/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248667347,"owners_count":21142425,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","drawing","ios","nativescript","nativescript-plugin","signatures"],"created_at":"2024-09-24T19:52:08.156Z","updated_at":"2025-04-13T05:27:02.615Z","avatar_url":"https://github.com/nativescript-community.png","language":"JavaScript","readme":"\u003ca align=\"center\" href=\"https://www.npmjs.com/package/nativescript-drawingpad\"\u003e\n    \u003ch3 align=\"center\"\u003eNativeScript DrawingPad\u003c/h3\u003e\n\u003c/a\u003e\n\u003ch5 align=\"center\"\u003e\nNativeScript plugin to provide a way to capture any drawing (signatures are a common use case) from the device. You can use this component to capture really anything you want that can be drawn on the screen.\u003c/h4\u003e\n\n\u003cp align=\"center\"\u003e\n   \u003ca href=\"https://github.com/bradmartin/nativescript-drawingpad/actions?query=workflow%3A%22Build+CI%22\"\u003e\n        \u003cimg src=\"https://github.com/bradmartin/nativescript-drawingpad/workflows/Build%20CI/badge.svg\" alt=\"Action Build\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/@nativescript-community/drawingpad\"\u003e\n        \u003cimg src=\"https://img.shields.io/npm/v/@nativescript-community/drawingpad.svg\" alt=\"npm\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/@nativescript-community/drawingpad\"\u003e\n        \u003cimg src=\"https://img.shields.io/npm/dt/@nativescript-community/drawingpad.svg?label=npm%20downloads\" alt=\"npm\"\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n---\n\n## Installation\n\nFrom your command prompt/termial go to your app's root folder and execute:\n\n#### NativeScript 7+:\n\n```bash\nns plugin add @nativescript-community/drawingpad\n```\n\n#### NativeScript \u003c 7:\n\n```bash\ntns plugin add nativescript-drawingpad\n```\n\n## Samples\n\n| Android                               | iOS                               |\n| ------------------------------------- | --------------------------------- |\n| ![Sample1](images/androidDrawing.gif) | ![Sample2](images/iosDrawing.gif) |\n\n#### Native Libraries:\n\n| Android                                                                         | iOS                                                       |\n| ------------------------------------------------------------------------------- | --------------------------------------------------------- |\n| [gcacace/android-signaturepad](https://github.com/gcacace/android-signaturepad) | [SignatureView](https://cocoapods.org/pods/SignatureView) |\n\n## Video Tutorial\n\n[Egghead lesson - https://egghead.io/lessons/javascript-capture-drawings-and-signatures-in-a-nativescript-app](https://egghead.io/lessons/javascript-capture-drawings-and-signatures-in-a-nativescript-app)\n\n## Written Tutorial\n\n[Blog post using Angular - http://tylerablake.com/nativescript/2019/05/02/capturing-signatures.html](http://tylerablake.com/nativescript/2019/05/02/capturing-signatures.html)\n\n## Usage\n\n#### XML:\n\n```XML\n\u003cPage xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:DrawingPad=\"@nativescript-community/drawingpad\" loaded=\"pageLoaded\"\u003e\n    \u003cActionBar title=\"NativeScript-DrawingPad\" /\u003e\n    \u003cScrollView\u003e\n        \u003cStackLayout\u003e\n\n            \u003cDrawingPad:DrawingPad\n            height=\"400\"\n            id=\"drawingPad\"\n            penColor=\"{{ penColor }}\" penWidth=\"{{ penWidth }}\" /\u003e\n\n        \u003c/StackLayout\u003e\n    \u003c/ScrollView\u003e\n\u003c/Page\u003e\n```\n\n### TS:\n\n```TS\nimport { Frame, ImageSource } from '@nativescript/core';\nimport { DrawingPad } from '@nativescript-community/drawingpad';\n\n// To get the drawing...\npublic getMyDrawing() {\n    const drawingPad = Frame.topmost().getViewById('myDrawingPad');\n    drawingPad.getDrawing().then((res) =\u003e {\n        console.log(res);\n        // At this point you have a native image (Bitmap on Android or UIImage on iOS)\n        // so lets convert to a NS Image using the ImageSource\n        const img = new ImageSource(res); // this can be set as the `src` of an `Image` inside your NSapplication now.\n        // now you might want a base64 version of the image\n        const base64imageString = image.toBase64String('jpg'); // if you need it as base64\n    });\n}\n\n\n// If you want to clear the signature/drawing...\npublic clearMyDrawing() {\n    const drawingPad = Frame.topmost().getViewById('myDrawingPad');\n    drawingPad.clearDrawing();\n}\n```\n\n## Angular:\n\n```javascript\nimport { Component, ElementRef, ViewChild } from '@angular/core';\nimport { registerElement } from '@nativescript/angular';\nimport { ImageSource } from '@nativescript/core';\nimport { DrawingPad } from '@nativescript-community/drawingpad';\n\nregisterElement('DrawingPad', () =\u003e DrawingPad);\n\n@Component({\n  selector: 'drawing-pad-example',\n  template: `\n    \u003cScrollView\u003e\n      \u003cStackLayout\u003e\n        \u003cDrawingPad\n          #DrawingPad\n          height=\"400\"\n          id=\"drawingPad\"\n          penColor=\"#ff4081\"\n          penWidth=\"3\"\n        \u003e\n        \u003c/DrawingPad\u003e\n\n        \u003cStackLayout orientation=\"horizontal\"\u003e\n          \u003cButton text=\"Get Drawing\" (tap)=\"getMyDrawing()\"\u003e\u003c/Button\u003e\n          \u003cButton text=\"Clear Drawing\" (tap)=\"clearMyDrawing()\"\u003e\u003c/Button\u003e\n        \u003c/StackLayout\u003e\n      \u003c/StackLayout\u003e\n    \u003c/ScrollView\u003e\n  `\n})\nexport class DrawingPadExample {\n  @ViewChild('DrawingPad') DrawingPad: ElementRef;\n\n  getMyDrawing(args) {\n    // get reference to the drawing pad\n    const pad = this.DrawingPad.nativeElement;\n\n    // then get the drawing (Bitmap on Android) of the drawingpad\n    let drawingImage;\n    pad.getDrawing().then((data) =\u003e {\n        console.log(data);\n        // At this point you have a native image (Bitmap on Android or UIImage on iOS)\n        // so lets convert to a NS Image using the ImageSource\n        const image = new ImageSource(data); // this can be set as the `src` of an `Image` inside your NS\n        drawingImage = image; // to set the src of an Image if needed.\n        // now you might want a base64 version of the image\n        const base64imageString = image.toBase64String('jpg'); // if you need it as base64\n        console.log('::IMG_BASE64::', base64imageString);\n      },\n      (err) =\u003e {\n        console.log(err);\n      }\n    );\n  }\n\n  clearMyDrawing(args) {\n    const pad = this.DrawingPad.nativeElement;\n    pad.clearDrawing();\n  }\n}\n```\n\n## Properties\n\n**penColor - (Color)** - _optional_\nProperty to specify the pen (stroke) color to use.\n\n**penWidth - (int)** - _optional_\nProperty to specify the pen (stroke) width to use.\n\n**clearOnLongPress - (boolean = true)** - _optional_ **_iOS Only_**\nGets/sets whether a long press will clear the view.\n\n## Methods\n\n**getDrawing()** - Promise _(returns image if successful)_\n\n**getDrawingAsBase64(format?: \"png\" | \"jpg\" | \"jpeg\")** - Promise _(returns image as base64 string if successful)_\n\n**clearDrawing()** - clears the drawing from the DrawingPad view.\n\n**getDrawingSvg()** - Promise (returns a Scalable Vector Graphics document)\n\n#### _Android Only_\n\n- **getTransparentDrawing()** - Promise (returns a bitmap with a transparent background)\n","funding_links":[],"categories":["Plugins"],"sub_categories":["Multimedia Plugins"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnativescript-community%2Fnativescript-drawingpad","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnativescript-community%2Fnativescript-drawingpad","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnativescript-community%2Fnativescript-drawingpad/lists"}