function SignaturePadElement(element){
var s = {};
s.resizeCanvas = function(){
// When zoomed out to less than 100%, for some very strange reason,
// some browsers report devicePixelRatio as less than 1
// and only part of the canvas is cleared then.
var ratio = Math.max(window.devicePixelRatio || 1, 1);
// This part causes the canvas to be cleared
s.canvas.width = s.canvas.offsetWidth * ratio;
s.canvas.height = s.canvas.offsetWidth * (2/3) * ratio;
s.canvas.getContext("2d").scale(ratio, ratio);
// This library does not listen for canvas changes, so after the canvas is automatically
// cleared by the browser, SignaturePad#isEmpty might still return false, even though the
// canvas looks empty, because the internal data of this library wasn't cleared. To make sure
// that the state of this library is consistent with visual state of the canvas, you
// have to clear it manually.
s.signaturePad.clear();
};
s.download = function(dataURL, filename) {
var blob = dataURLToBlob(dataURL);
var url = window.URL.createObjectURL(blob);
var a = document.createElement("a");
a.style = "display: none";
a.href = url;
a.download = filename;
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
}
// One could simply use Canvas#toBlob method instead, but it's just to show
// that it can be done using result of SignaturePad#toDataURL.
s.dataURLToBlob = function(dataURL) {
// Code taken from https://github.com/ebidel/filer.js
var parts = dataURL.split(';base64,');
var contentType = parts[0].split(":")[1];
var raw = window.atob(parts[1]);
var rawLength = raw.length;
var uInt8Array = new Uint8Array(rawLength);
for (var i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], { type: contentType });
}
s.captureSignature = function(){
if (s.signaturePad.isEmpty()) {
//alert("Please provide a signature first.");
} else {
var dataURL = s.signaturePad.toDataURL();
s.$element.find('.signature-img-div').css('display' , '');
s.$element.find('.signature-img-div-sig').html('');
s.$element.find('.hidden-signature-field').val(dataURL);
s.$element.find('.signature-pad').css('display' , 'none');
//s.signatureImage.write('');
//s.hiddenField.setAttribute('value' , dataURL);
}
}
//$('.tab-pane').css('display' , 'none');
//$('#signaturetab').css('display' , 'block');
/*
s.wrapper = document.getElementById(element);
s.clearButton = s.wrapper.querySelector("[data-action=clear]");
s.changeColorButton = s.wrapper.querySelector("[data-action=change-color]");
s.undoButton = s.wrapper.querySelector("[data-action=undo]");
s.savePNGButton = s.wrapper.querySelector("[data-action=save-png]");
//s.savePNGButton = s.wrapper.querySelector("[data-action=save-png]");
//s.saveJPGButton = s.wrapper.querySelector("[data-action=save-jpg]");
//s.saveSVGButton = s.wrapper.querySelector("[data-action=save-svg]");
s.canvas = s.wrapper.querySelector("canvas");
*/
//s.wrapper = $(element);
s.$element = $('#' + element);
s.wrapper = document.getElementById(element);
s.clearButton = s.wrapper.querySelector("[data-action=clear]");
s.doneButton = s.wrapper.querySelector("[data-action=done]");
s.canvas = s.wrapper.querySelector("canvas");
s.signaturePad = new SignaturePad(s.canvas, {
// It's Necessary to use an opaque color when saving image as JPEG;
// this option can be omitted if only saving as PNG or SVG
backgroundColor: 'rgb(255, 255, 255)'
});
if(s.$element.find('.signature-img').length < 1){
s.$element.find('.signature-img-div').css('display' , 'none');
}
// On mobile devices it might make more sense to listen to orientation change,
// rather than window resize events.
window.onresize = s.resizeCanvas;
s.resizeCanvas();
$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
s.captureSignature();
s.resizeCanvas();
});
s.clearButton.addEventListener("click", function (event) {
s.signaturePad.clear();
s.resizeCanvas();
});
s.doneButton.addEventListener("click", function (event) {
s.captureSignature();
});
s.$element.find('.update').on('click' , function(){
s.$element.find('.signature-pad').css('display' , '');
s.$element.find('.signature-img-div').css('display' , 'none');
s.resizeCanvas();
});
/*
s.saveJPGButton.addEventListener("click", function (event) {
if (s.signaturePad.isEmpty()) {
alert("Please provide a signature first.");
} else {
var dataURL = s.signaturePad.toDataURL("image/jpeg");
s.download(dataURL, "signature.jpg");
}
});
s.saveSVGButton.addEventListener("click", function (event) {
if (s.signaturePad.isEmpty()) {
alert("Please provide a signature first.");
} else {
var dataURL = s.signaturePad.toDataURL('image/svg+xml');
s.download(dataURL, "signature.svg");
}
});
*/
}