Angular2 Signaturepad Upload Image to Server Todataurl Not a String

Signature Pad

Signature Pad is a JavaScript library for drawing smoothen signatures. It'due south HTML5 canvas based and uses variable width Bézier bend interpolation based on Smoother Signatures post by Square. It works in all modern desktop and mobile browsers and doesn't depend on any external libraries.

Example

Looking for a maintainer

I wrote this library as it solved a problem I had at the time. Unfortunately, I no longer take time or motivation to work on this library anymore.

Please reach out to me if you lot'd like to help out and somewhen maintain this project.

Demo

Demo works in desktop and mobile browsers. You can check out its source code for some tips on how to handle window resize and high DPI screens. Y'all can too find more than almost the latter in HTML5 Rocks tutorial.

Other demos

Erase feature: https://jsfiddle.internet/szimek/jq9cyzuc/
Undo feature: https://jsfiddle.net/szimek/osenxvjc/

Installation

You tin can install the latest release using npm:

          npm install --salvage signature_pad

or Yarn:

          yarn add signature_pad

You can also add it straight to your folio using <script> tag:

          <script src="https://cdn.jsdelivr.net/npm/signature_pad@4.0.0/dist/signature_pad.umd.min.js"></script>

You can select a dissimilar version at https://www.jsdelivr.com/bundle/npm/signature_pad.

This library is provided as UMD (Universal Module Definition) and ES6 module.

Usage

API

          const canvass = document.querySelector("canvass");  const signaturePad = new SignaturePad(canvas);  // Returns signature image as information URL (meet https://mdn.io/todataurl for the list of possible parameters) signaturePad.toDataURL(); // save epitome as PNG signaturePad.toDataURL("image/jpeg"); // salvage image equally JPEG signaturePad.toDataURL("paradigm/svg+xml"); // save image as SVG  // Draws signature image from information URL. // Annotation: This method does non populate internal data structure that represents fatigued signature. Thus, after using #fromDataURL, #toData won't work properly. signaturePad.fromDataURL("information:prototype/png;base64,iVBORw0K...");  // Returns signature image as an array of betoken groups const data = signaturePad.toData();  // Draws signature prototype from an array of point groups signaturePad.fromData(data);  // Draws signature image from an array of point groups, without clearing your existing image (clear defaults to truthful if non provided) signaturePad.fromData(information, { articulate: faux });  // Clears the canvas signaturePad.clear();  // Returns true if canvas is empty, otherwise returns false signaturePad.isEmpty();  // Unbinds all event handlers signaturePad.off();  // Rebinds all event handlers signaturePad.on();

Options

You can prepare options during initialization:

          const signaturePad = new SignaturePad(sail, {     minWidth: 5,     maxWidth: ten,     penColor: "rgb(66, 133, 244)" });

or during runtime:

          const signaturePad = new SignaturePad(canvas); signaturePad.minWidth = v; signaturePad.maxWidth = 10; signaturePad.penColor = "rgb(66, 133, 244)";

Events

You can add listeners to events with .addEventListener:

          const signaturePad = new SignaturePad(canvass); signaturePad.addEventListener("beginStroke", () => {   console.log("Signature started"); }, { once: true });

Tips and tricks

Handling high DPI screens

To correctly handle canvas on low and high DPI screens one has to have devicePixelRatio into account and scale the canvas accordingly. This scaling is also necessary to properly display signatures loaded via SignaturePad#fromDataURL. Here'due south an example how it can be done:

          role resizeCanvas() {     const ratio =  Math.max(window.devicePixelRatio || 1, one);     sheet.width = sheet.offsetWidth * ratio;     canvas.height = canvass.offsetHeight * ratio;     canvas.getContext("2d").calibration(ratio, ratio);     signaturePad.clear(); // otherwise isEmpty() might return incorrect value }  window.addEventListener("resize", resizeCanvas); resizeCanvas();

Instead of resize issue you lot tin heed to screen orientation alter, if you're using this library simply on mobile devices. You tin too throttle the resize event - you can discover some examples on this MDN page.

When y'all alter width or superlative of a canvas, it will exist automatically cleared by the browser. SignaturePad doesn't know virtually it by itself, and then you can call signaturePad.clear() to make sure that signaturePad.isEmpty() returns correct value in this example.

This immigration of the sheet by the browser tin exist annoying, especially on mobile devices e.g. when screen orientation is changed. In that location are a few workarounds though, eastward.g. yous tin lock screen orientation, or read an image from the sail before resizing it and write the image back later on.

Handling data URI encoded images on the server side

If yous are not familiar with information URI scheme, you can read more than about it on Wikipedia.

There are ii ways you tin can handle data URI encoded images.

Y'all could simply store information technology in your database as a string and display it in HTML like this:

          <img src="data:image/png;base64,iVBORw0K..." />

but this way has many disadvantages - it's not easy to get epitome dimensions, you can't manipulate it east.g. to create a thumbnail and information technology also has some functioning issues on mobile devices.

Thus, more common way is to decode information technology and store as a file. Hither's an example in Ruby:

          require "base64"  data_uri = "data:paradigm/png;base64,iVBORw0K..." encoded_image = data_uri.split(",")[i] decoded_image = Base64.decode64(encoded_image) File.open("signature.png", "wb") { |f| f.write(decoded_image) }

Here'due south an example in PHP:

          $data_uri = "information:paradigm/png;base64,iVBORw0K..."; $encoded_image = explode(",", $data_uri)[1]; $decoded_image = base64_decode($encoded_image); file_put_contents("signature.png", $decoded_image);

Here'southward an example in C# for ASP.NET:

          var dataUri = "data:paradigm/png;base64,iVBORw0K..."; var encodedImage = dataUri.Divide(',')[i]; var decodedImage = Convert.FromBase64String(encodedImage); Organisation.IO.File.WriteAllBytes("signature.png", decodedImage);

Removing empty infinite around a signature

If you'd like to remove (trim) empty space around a signature, you can exercise it on the server side or the client side. On the server side yous tin can use e.g. ImageMagic and its trim choice: convert -trim input.jpg output.jpg. If you lot don't have access to the server, or simply want to trim the epitome before submitting it to the server, y'all tin can do it on the customer side as well. There are a few examples how to do it, e.one thousand. here or hither and there's besides a tiny library trim-sail that provides this functionality.

Drawing over an image

Demo: https://jsfiddle.internet/szimek/d6a78gwq/

License

Released under the MIT License.

mathewsonthaterhal.blogspot.com

Source: https://npm.io/package/signature_pad