HTML5 Signature Pad to Image is a JavaScript library for drawing smooth signatures. It's HTML5 canvas based and uses variable width Bezier curve 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.

Need a customer's signature saved to an image? This is the perfect solution! Draw, sign or touch-n-slide to add your signature and save it to an image format with transparency. It's the perfect solution if you need a signature for legal documents, purchase invoices, contracts or other important docs.

HTML5 Signature Pad to Image is a HTML5 Canvas Capture Signature which support Drawing and Saving Images.

This is a JavaScript sample to capture a signature in a canvas area. And then you can save the image as required format. There are javascript functions handle the events in the canvas area. Then it capture the image data by todataurl().

Easy to use Plug-n-Play app for any web browser, iPhone, iPad or iPod Touch that supports HTML5 and Canvas image export.

Add it to your webpage in 2 simple steps. Simple requirements are HTML5, toDataURL, PHP+GD.

HTML5 Signature Pad to Image Highlight Features:
* Save signature directly to PNG, JPG, SVG
* Customizable Color Palette
* Customizable Pencil Sizes
* Unlimited Undos
* Quick Signature Clear
* Tons of Javascript Settings
* Capture Customer Signature onsite by browser
* HTML5 Canvas Webapp
* Capture Signature
* HTML5 Signature Pad to Image
* Signature Pads, Electronic signature solutions‎
* A jQuery Signature plugin allows users to draw a signature using mouse, pen, or finger on touch enabled devices (e.g. iPhones, iPads or Android devices)
* Capturing Signatures with Signature Pad
* Smooth Signature Pad Plugin with jQuery and Html5 Canvas
* Touch-enabled Signature Plugin with jQuery and Canvas
* Signature Pads | Custom Service

You can also add it directly to your page using [script] tag:

[script src="https://veryutils.com/demo/html5-signature-pad-to-image/js/signature_pad.js"][/script]

API Usage:
-------------------------------------------
var canvas = document.querySelector("canvas");

var signaturePad = new SignaturePad(canvas);

// Returns signature image as data URL
signaturePad.toDataURL(); // save image as PNG
signaturePad.toDataURL("image/jpeg"); // save image as JPEG
signaturePad.toDataURL("image/svg+xml"); // save image as SVG

// Draws signature image from data URL.
// NOTE: This method does not populate internal data structure
// that represents drawn signature. Thus, after using #fromDataURL,
// #toData won't work properly.
signaturePad.fromDataURL("data:image/png;base64,iVBORw0K...");

// Returns signature image as an array of point groups
const data = signaturePad.toData();

// Draws signature image from an array of point groups
signaturePad.fromData(data);

// 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:

dotSize: (float or function) Radius of a single dot.

minWidth: (float) Minimum width of a line. Defaults to 0.5.

maxWidth: (float) Maximum width of a line. Defaults to 2.5.

throttle: (integer) Draw the next point at most once per every x milliseconds. Set it to 0 to turn off throttling. Defaults to 16.

minDistance: (integer) Add the next point only if the previous one is farther than x pixels. Defaults to 5.

backgroundColor: (string) Color used to clear the background. Can be any color format accepted by context.fillStyle. Defaults to "rgba(0,0,0,0)" (transparent black). Use a non-transparent color e.g. "rgb(255,255,255)" (opaque white) if you'd like to save signatures as JPEG images.

penColor: (string) Color used to draw the lines. Can be any color format accepted by context.fillStyle. Defaults to "black".

velocityFilterWeight: (float) Weight used to modify new velocity based on the previous velocity. Defaults to 0.7.

onBegin: (function) Callback when stroke begin.

onEnd: (function) Callback when stroke end.

You can set options during initialization:
-------------------------------------------
var signaturePad = new SignaturePad(canvas, {
minWidth: 5,
maxWidth: 10,
penColor: "rgb(66, 133, 244)"
});
-------------------------------------------
or during runtime:
-------------------------------------------
var signaturePad = new SignaturePad(canvas);
signaturePad.minWidth = 5;
signaturePad.maxWidth = 10;
signaturePad.penColor = "rgb(66, 133, 244)";
-------------------------------------------

Tips and tricks:

Handling high DPI screens. To 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:
-------------------------------------------
function resizeCanvas() {
var ratio = Math.max(window.devicePixelRatio || 1, 1);
canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;
canvas.getContext("2d").scale(ratio, ratio);
signaturePad.clear(); // otherwise isEmpty() might return incorrect value
}

window.addEventListener("resize", resizeCanvas);
resizeCanvas();
-------------------------------------------
Instead 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.

When 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.clear() to make sure that signaturePad.isEmpty() returns correct value in this case.

This 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, or read an image from the canvas before resizing it and write the image back after.

Handling data URI encoded images on the server side

There are 2 ways you can handle data URI encoded images.

You could simply store it 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 image dimensions, you can't manipulate it e.g. to create a thumbnail and it also has some performance issues on mobile devices.

Thus, more common way is to decode it and store as a file. Here's an example in Ruby:
-------------------------------------------
require "base64"

data_uri = "data:image/png;base64,iVBORw0K..."
encoded_image = data_uri.split(",")[1]
decoded_image = Base64.decode64(encoded_image)
File.open("signature.png", "wb") { |f| f.write(decoded_image) }
-------------------------------------------
Here's an example in PHP:
-------------------------------------------
$data_uri = "data:image/png;base64,iVBORw0K...";
$encoded_image = explode(",", $data_uri)[1];
$decoded_image = base64_decode($encoded_image);
file_put_contents("signature.png", $decoded_image);
-------------------------------------------
Here's an example in C# for ASP.NET:
-------------------------------------------
var dataUri = "data:image/png;base64,iVBORw0K...";
var encodedImage = dataUri.Split(",")[1];
var decodedImage = Convert.FromBase64String(encodedImage);
System.IO.File.WriteAllBytes("signature.png", decodedImage);
-------------------------------------------
Removing empty space around a signature

If 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 trim-canvas libraries that provides this functionality.

Write a review

Note: HTML is not translated!
    Bad           Good
Captcha

HTML5 Signature Pad to Image

  • Product Code: MOD190509185818
  • Availability: In Stock
  • Viewed: 19075
  • Sold By: BestScripts
  • Seller Rating:
  • Seller Reviews: (0)
  • $29.95
  • $24.95-17%

  • Ex Tax: $24.95

Available Options


Related Products

Arena5 - HTML5 Game for Web, Written by Html5 and JavaScript, Game Template

Arena5 - HTML5 Game for Web, Written by Html5 and JavaScript, Game Template

Arena5 - HTML5 Game for Web, written by Html5 and JavaScript, Game Template Use WASD or Arrow k..

$19.95 Ex Tax: $19.95

SudokuJS -- JavaScript Sudoku solver

SudokuJS -- JavaScript Sudoku solver

SudokuJS -- JavaScript Sudoku solver SudokuJS has a step by step solver that implements basic str..

$19.95 Ex Tax: $19.95

Save
20%

JavaScript Photo Editor

JavaScript Photo Editor

JavaScript Photo Editor is a high-performance JavaScript Image Editing in the Web Browser. It's a ..

$39.95 $49.95 Ex Tax: $39.95

Tower Platformer Online Javascript HTML5 Game

Tower Platformer Online Javascript HTML5 Game

Tower Platformer Online Javascript HTML5 Game A platform game that took place on a rotating tow..

$9.95 Ex Tax: $9.95

Photo Slideshow and Thumbnail Viewer JavaScript Source Code

Photo Slideshow and Thumbnail Viewer JavaScript Source Code

Photo Slideshow JS is a Photo Slideshow and Thumbnail Viewer JavaScript Source Code, it is an image,..

$29.95 Ex Tax: $29.95

Save
50%

PHP Booking and Appointment Scheduler

PHP Booking and Appointment Scheduler

PHP Appointment Scheduler is an online appointment scheduling software to boost sales and manage b..

$49.95 $99.95 Ex Tax: $49.95

LinkedIn Bulk Invitation Withdrawal Automation Script

LinkedIn Bulk Invitation Withdrawal Automation Script

LinkedIn Bulk Invitation Withdrawal Automation Script. Withdraw All Your Linkedin Connect Invitatio..

$9.95 Ex Tax: $9.95

Save
25%

HTML Invoice with Fillable Forms

HTML Invoice with Fillable Forms

HTML Invoice with Fillable Forms HTML Invoice with Fillable Forms is a minimal clean unique, modern..

$29.95 $39.95 Ex Tax: $29.95

Chinese Chess in HTML5 and JavaScript

Chinese Chess in HTML5 and JavaScript

Chinese Chess in HTML5 and JavaScript This is a project of Chinese Chess with AI based on HTML5/C..

$0.00 Ex Tax: $0.00

Online HTML5 Delta Game, JavaScript Shooting Game

Online HTML5 Delta Game, JavaScript Shooting Game

Javascript HTML5 Delta Game, JavaScript Shooting Game ================= This is a small weekend ho..

$9.95 Ex Tax: $9.95

Printable Schulte Grid Generator for Kid Training

Printable Schulte Grid Generator for Kid Training

Printable Schulte Grid Generator for Kid Training Schulte Grid is invented by Doctor Schulte for th..

$19.95 Ex Tax: $19.95

PDF Viewer for WordPress & JavaScript

PDF Viewer for WordPress & JavaScript

PDF Viewer Plugin for WordPress & JavaScript PDF Viewer Plugin for WordPress & JavaScript is a resp..

$39.00 Ex Tax: $39.00

Save
20%

Javascript Image Cropper, Responsive Uploading and Ratio Cropping Plugin

Javascript Image Cropper, Responsive Uploading and Ratio Cropping Plugin

Javascript Image Cropper provides a draggable/resizable cropper widget to crop image sizes. Javasc..

$39.95 $49.95 Ex Tax: $39.95

Save
20%

Sliding Tabs - jQuery Plugin

Sliding Tabs - jQuery Plugin

The sliding tabs jQuery plugin let's you create any number of tabs and make them slidable with the..

$39.95 $49.95 Ex Tax: $39.95

Tags: canvas signature, capture signature, finger signature, html5 canvas, html5 capture signature canvas, html5 pad, html5 signature, html5 signature pad, ipad signature, iphone signature, javascript canvas, jquery canvas, jquery signature, mobile signature, signature pad, signature to jpg, signature to png, signature to svg, smooth signature pad