{"id":13445977,"url":"https://github.com/szimek/signature_pad","last_synced_at":"2025-09-09T20:40:33.133Z","repository":{"id":7460155,"uuid":"8805592","full_name":"szimek/signature_pad","owner":"szimek","description":"HTML5 canvas based smooth signature drawing","archived":false,"fork":false,"pushed_at":"2025-09-03T07:42:10.000Z","size":5297,"stargazers_count":11550,"open_issues_count":6,"forks_count":2172,"subscribers_count":217,"default_branch":"master","last_synced_at":"2025-09-03T09:25:37.687Z","etag":null,"topics":["canvas","drawing","javascript","signature","signature-pad"],"latest_commit_sha":null,"homepage":"http://szimek.github.io/signature_pad/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/szimek.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2013-03-15T17:59:57.000Z","updated_at":"2025-09-03T08:47:15.000Z","dependencies_parsed_at":"2022-07-12T00:01:37.849Z","dependency_job_id":"5a3b8adc-fadf-4007-bd8b-a9eb37954d64","html_url":"https://github.com/szimek/signature_pad","commit_stats":{"total_commits":376,"total_committers":57,"mean_commits":"6.5964912280701755","dds":0.5718085106382979,"last_synced_commit":"993e1cf47c7ce0be19f883b1d3aac6d3a8f12ce8"},"previous_names":[],"tags_count":61,"template":false,"template_full_name":null,"purl":"pkg:github/szimek/signature_pad","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/szimek%2Fsignature_pad","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/szimek%2Fsignature_pad/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/szimek%2Fsignature_pad/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/szimek%2Fsignature_pad/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/szimek","download_url":"https://codeload.github.com/szimek/signature_pad/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/szimek%2Fsignature_pad/sbom","scorecard":{"id":864302,"data":{"date":"2025-08-11","repo":{"name":"github.com/szimek/signature_pad","commit":"f50ba4716db1921198dbab8544ddd722debb94c5"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":4.4,"checks":[{"name":"Code-Review","score":1,"reason":"Found 3/24 approved changesets -- score normalized to 1","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Maintained","score":10,"reason":"13 commit(s) and 5 issue activity found in the last 90 days -- score normalized to 10","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/test.yml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Pinned-Dependencies","score":0,"reason":"dependency not pinned by hash detected -- score normalized to 0","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:33: update your workflow using https://app.stepsecurity.io/secureworkflow/szimek/signature_pad/test.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:35: update your workflow using https://app.stepsecurity.io/secureworkflow/szimek/signature_pad/test.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:48: update your workflow using https://app.stepsecurity.io/secureworkflow/szimek/signature_pad/test.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:50: update your workflow using https://app.stepsecurity.io/secureworkflow/szimek/signature_pad/test.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:67: update your workflow using https://app.stepsecurity.io/secureworkflow/szimek/signature_pad/test.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:69: update your workflow using https://app.stepsecurity.io/secureworkflow/szimek/signature_pad/test.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/szimek/signature_pad/test.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/szimek/signature_pad/test.yml/master?enable=pin","Info:   0 out of   8 GitHub-owned GitHubAction dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'","Warn: branch protection not enabled for branch 'beta'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Packaging","score":10,"reason":"packaging workflow detected","details":["Info: Project packages its releases by way of GitHub Actions.: .github/workflows/test.yml:59"],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 15 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":6,"reason":"4 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-xffm-g5w8-qvg7","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-24T02:14:50.432Z","repository_id":7460155,"created_at":"2025-08-24T02:14:50.432Z","updated_at":"2025-08-24T02:14:50.432Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273619739,"owners_count":25138241,"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","status":"online","status_checked_at":"2025-09-04T02:00:08.968Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["canvas","drawing","javascript","signature","signature-pad"],"created_at":"2024-07-31T05:00:42.988Z","updated_at":"2025-09-09T20:40:33.124Z","avatar_url":"https://github.com/szimek.png","language":"TypeScript","funding_links":[],"categories":["Libraries","TypeScript","JavaScript","Locker Safe JS Resources"],"sub_categories":["Signature pad","UI Widget"],"readme":"# Signature Pad [![npm](https://badge.fury.io/js/signature_pad.svg)](https://www.npmjs.com/package/signature_pad) [![tests](https://github.com/szimek/signature_pad/actions/workflows/test.yml/badge.svg)](https://github.com/szimek/signature_pad/actions/workflows/test.yml) [![Code Climate](https://codeclimate.com/github/szimek/signature_pad.png)](https://codeclimate.com/github/szimek/signature_pad) [![](https://data.jsdelivr.com/v1/package/npm/signature_pad/badge?style=rounded)](https://www.jsdelivr.com/package/npm/signature_pad)\n\nSignature Pad is a JavaScript library for drawing smooth signatures. It's HTML5 canvas based and uses variable width Bézier curve interpolation based on [Smoother Signatures](https://developer.squareup.com/blog/smoother-signatures/) post by [Square](https://squareup.com).\nIt works in all modern desktop and mobile browsers and doesn't depend on any external libraries.\n\n![Example](https://f.cloud.github.com/assets/9873/268046/9ced3454-8efc-11e2-816e-a9b170a51004.png)\n\n## Demo\n\n[Demo](http://szimek.github.io/signature_pad) works in desktop and mobile browsers. You can check out its [source code](https://github.com/szimek/signature_pad/blob/master/docs/js/app.js) for some tips on how to handle window resize and high DPI screens. You can also find more about the latter in [HTML5 Rocks tutorial](http://www.html5rocks.com/en/tutorials/canvas/hidpi).\n\n### Other demos\n\n- Erase feature: \u003chttps://jsfiddle.net/UziTech/xa91e4Lp/\u003e\n- Undo feature: \u003chttps://jsfiddle.net/szimek/osenxvjc/\u003e\n\n## Installation\n\nYou can install the latest release using npm:\n\n```bash\nnpm install --save signature_pad\n```\n\nor Yarn:\n\n```bash\nyarn add signature_pad\n```\n\nYou can also add it directly to your page using `\u003cscript\u003e` tag:\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/signature_pad@5.0.10/dist/signature_pad.umd.min.js\"\u003e\u003c/script\u003e\n```\n\nYou can select a different version at [https://www.jsdelivr.com/package/npm/signature_pad](https://www.jsdelivr.com/package/npm/signature_pad).\n\nThis library is provided as UMD (Universal Module Definition) and ES6 module.\n\n## Usage\n\n### API\n\n```javascript\nconst canvas = document.querySelector(\"canvas\");\n\nconst signaturePad = new SignaturePad(canvas);\n\n// Returns signature image as data URL (see https://mdn.io/todataurl for the list of possible parameters)\nsignaturePad.toDataURL(); // save image as PNG\nsignaturePad.toDataURL(\"image/jpeg\"); // save image as JPEG\nsignaturePad.toDataURL(\"image/jpeg\", 0.5); // save image as JPEG with 0.5 image quality\nsignaturePad.toDataURL(\"image/svg+xml\"); // save image as SVG data url\n\n// Return svg string without converting to base64\nsignaturePad.toSVG(); // \"\u003csvg...\u003c/svg\u003e\"\nsignaturePad.toSVG({includeBackgroundColor: true}); // add background color to svg output\nsignaturePad.toSVG({includeDataUrl: true}); // add data url added with fromDataUrl to svg output background\n\n// Draws signature image from data URL (mostly uses https://mdn.io/drawImage under-the-hood)\n// NOTE: This method does not populate internal data structure that represents drawn signature. Thus, after using #fromDataURL, #toData won't work properly.\nsignaturePad.fromDataURL(\"data:image/png;base64,iVBORw0K...\");\n\n// Draws signature image from data URL and alters it with the given options\nsignaturePad.fromDataURL(\"data:image/png;base64,iVBORw0K...\", { ratio: 1, width: 400, height: 200, xOffset: 100, yOffset: 50 });\n\n// Returns signature image as an array of point groups\nconst data = signaturePad.toData();\n\n// Draws signature image from an array of point groups\nsignaturePad.fromData(data);\n\n// Draws signature image from an array of point groups, without clearing your existing image (clear defaults to true if not provided)\nsignaturePad.fromData(data, { clear: false });\n\n// Redraw the canvas\nsignaturePad.redraw();\n\n// Clears the canvas\nsignaturePad.clear();\n\n// Returns true if canvas is empty, otherwise returns false\nsignaturePad.isEmpty();\n\n// Unbinds all event handlers\nsignaturePad.off();\n\n// Rebinds all event handlers\nsignaturePad.on();\n```\n\n### Options\n\n\u003cdl\u003e\n\u003cdt\u003edotSize\u003c/dt\u003e\n\u003cdd\u003e(float or function) Radius of a single dot. Also the width of the start of a mark.\u003c/dd\u003e\n\u003cdt\u003eminWidth\u003c/dt\u003e\n\u003cdd\u003e(float) Minimum width of a line. Defaults to \u003ccode\u003e0.5\u003c/code\u003e.\u003c/dd\u003e\n\u003cdt\u003emaxWidth\u003c/dt\u003e\n\u003cdd\u003e(float) Maximum width of a line. Defaults to \u003ccode\u003e2.5\u003c/code\u003e.\u003c/dd\u003e\n\u003cdt\u003ethrottle\u003c/dt\u003e\n\u003cdd\u003e(integer) Draw the next point at most once per every \u003ccode\u003ex\u003c/code\u003e milliseconds. Set it to \u003ccode\u003e0\u003c/code\u003e to turn off throttling. Defaults to \u003ccode\u003e16\u003c/code\u003e.\u003c/dd\u003e\n\u003cdt\u003eminDistance\u003c/dt\u003e\n\u003cdd\u003e(integer) Add the next point only if the previous one is farther than \u003ccode\u003ex\u003c/code\u003e pixels. Defaults to \u003ccode\u003e5\u003c/code\u003e.\n\u003cdt\u003ebackgroundColor\u003c/dt\u003e\n\u003cdd\u003e(string) Color used to clear the background. Can be any color format accepted by \u003ccode\u003econtext.fillStyle\u003c/code\u003e. Defaults to \u003ccode\u003e\"rgba(0,0,0,0)\"\u003c/code\u003e (transparent black). Use a non-transparent color e.g. \u003ccode\u003e\"rgb(255,255,255)\"\u003c/code\u003e (opaque white) if you'd like to save signatures as JPEG images.\u003c/dd\u003e\n\u003cdt\u003epenColor\u003c/dt\u003e\n\u003cdd\u003e(string) Color used to draw the lines. Can be any color format accepted by \u003ccode\u003econtext.fillStyle\u003c/code\u003e. Defaults to \u003ccode\u003e\"black\"\u003c/code\u003e.\u003c/dd\u003e\n\u003cdt\u003evelocityFilterWeight\u003c/dt\u003e\n\u003cdd\u003e(float) Weight used to modify new velocity based on the previous velocity. Defaults to \u003ccode\u003e0.7\u003c/code\u003e.\u003c/dd\u003e\n\u003cdt\u003ecanvasContextOptions\u003c/dt\u003e\n\u003cdd\u003e(CanvasRenderingContext2DSettings) part of the Canvas API, provides the 2D rendering context for the drawing surface of a \u003ccode\u003ecanvas\u003c/code\u003e element. It is used for drawing shapes, text, images, and other objects (\u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getContextAttributes\"\u003eMDN\u003c/a\u003e).\u003c/dd\u003e\n\u003c/dl\u003e\n\nYou can set options during initialization:\n\n```javascript\nconst signaturePad = new SignaturePad(canvas, {\n    minWidth: 5,\n    maxWidth: 10,\n    penColor: \"rgb(66, 133, 244)\"\n});\n```\n\nor during runtime:\n\n```javascript\nconst signaturePad = new SignaturePad(canvas);\nsignaturePad.minWidth = 5;\nsignaturePad.maxWidth = 10;\nsignaturePad.penColor = \"rgb(66, 133, 244)\";\n```\n\n### Events\n\n\u003cdl\u003e\n\u003cdt\u003ebeginStroke\u003c/dt\u003e\n\u003cdd\u003eTriggered before stroke begins.\u003cbr\u003eCan be canceled with \u003ccode\u003eevent.preventDefault()\u003c/code\u003e\u003c/dd\u003e\n\u003cdt\u003eendStroke\u003c/dt\u003e\n\u003cdd\u003eTriggered after stroke ends.\u003c/dd\u003e\n\u003cdt\u003ebeforeUpdateStroke\u003c/dt\u003e\n\u003cdd\u003eTriggered before stroke update.\u003c/dd\u003e\n\u003cdt\u003eafterUpdateStroke\u003c/dt\u003e\n\u003cdd\u003eTriggered after stroke update.\u003c/dd\u003e\n\u003c/dl\u003e\n\nYou can add listeners to events with [`.addEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener):\n\n```javascript\nconst signaturePad = new SignaturePad(canvas);\nsignaturePad.addEventListener(\"beginStroke\", () =\u003e {\n  console.log(\"Signature started\");\n}, { once: true });\n```\n\n### Tips and tricks\n\n#### Handling high DPI screens\n\nTo correctly handle canvas on low and high DPI screens one has to take `devicePixelRatio` into account and scale the canvas accordingly. This scaling is also necessary to properly display signatures loaded via `SignaturePad#fromDataURL`. Here's an example how it can be done:\n\n```javascript\nfunction resizeCanvas() {\n    const ratio =  Math.max(window.devicePixelRatio || 1, 1);\n    canvas.width = canvas.offsetWidth * ratio;\n    canvas.height = canvas.offsetHeight * ratio;\n    canvas.getContext(\"2d\").scale(ratio, ratio);\n    signaturePad.clear(); // otherwise isEmpty() might return incorrect value\n}\n\nwindow.addEventListener(\"resize\", resizeCanvas);\nresizeCanvas();\n```\n\nInstead of `resize` event you can listen to screen orientation change, if you're using this library only on mobile devices. You can also throttle the `resize` event - you can find some examples on [this MDN page](https://developer.mozilla.org/en-US/docs/Web/Events/resize).\n\n#### Handling canvas resize\n\nWhen you modify width or height of a canvas, it will be automatically cleared by the browser. SignaturePad doesn't know about it by itself, so you can call `signaturePad.redraw()` to reset the drawing, or `signaturePad.clear()` to make sure that `signaturePad.isEmpty()` returns correct value in this case.\n\nThis clearing of the canvas by the browser can be annoying, especially on mobile devices e.g. when screen orientation is changed. There are a few workarounds though, e.g. you can [lock screen orientation](https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientation), or read an image from the canvas before resizing it and write the image back after.\n\n#### Handling data URI encoded images on the server side\n\nIf you are not familiar with data URI scheme, you can read more about it on [Wikipedia](http://en.wikipedia.org/wiki/Data_URI_scheme).\n\nThere are 2 ways you can handle data URI encoded images.\n\nYou could simply store it in your database as a string and display it in HTML like this:\n\n```html\n\u003cimg src=\"data:image/png;base64,iVBORw0K...\" /\u003e\n```\n\nbut this way has many disadvantages - it's not easy to get image dimensions, you can't manipulate it e.g. to create a thumbnail and it also [has some performance issues on mobile devices](https://web.archive.org/web/20160414182912/http://www.mobify.com/blog/data-uris-are-slow-on-mobile).\n\nThus, more common way is to decode it and store as a file. Here's an example in Ruby:\n\n```ruby\nrequire \"base64\"\n\ndata_uri = \"data:image/png;base64,iVBORw0K...\"\nencoded_image = data_uri.split(\",\")[1]\ndecoded_image = Base64.decode64(encoded_image)\nFile.open(\"signature.png\", \"wb\") { |f| f.write(decoded_image) }\n```\n\nHere's an example in PHP:\n\n```php\n$data_uri = \"data:image/png;base64,iVBORw0K...\";\n$encoded_image = explode(\",\", $data_uri)[1];\n$decoded_image = base64_decode($encoded_image);\nfile_put_contents(\"signature.png\", $decoded_image);\n```\n\nHere's an example in C# for ASP.NET:\n\n```csharp\nvar dataUri = \"data:image/png;base64,iVBORw0K...\";\nvar encodedImage = dataUri.Split(',')[1];\nvar decodedImage = Convert.FromBase64String(encodedImage);\nSystem.IO.File.WriteAllBytes(\"signature.png\", decodedImage);\n```\n\n#### Removing empty space around a signature\n\nIf you'd like to remove (trim) empty space around a signature, you can do it on the server side or the client side. On the server side you can use e.g. ImageMagic and its `trim` option: `convert -trim input.jpg output.jpg`. If you don't have access to the server, or just want to trim the image before submitting it to the server, you can do it on the client side as well. There are a few examples how to do it, e.g. [here](https://github.com/szimek/signature_pad/issues/49#issue-29108215) or [here](https://github.com/szimek/signature_pad/issues/49#issuecomment-260976909) and there's also a tiny library [trim-canvas](https://github.com/agilgur5/trim-canvas) that provides this functionality.\n\n#### Drawing over an image\n\nDemo: \u003chttps://jsfiddle.net/szimek/d6a78gwq/\u003e\n\n## License\n\nReleased under the [MIT License](http://www.opensource.org/licenses/MIT).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fszimek%2Fsignature_pad","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fszimek%2Fsignature_pad","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fszimek%2Fsignature_pad/lists"}