You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
146 lines
5.0 KiB
146 lines
5.0 KiB
debugger
|
|
var wrapper = document.getElementById("signature-pad");
|
|
var clearButton = wrapper.querySelector("[data-action=clear]");
|
|
var changeColorButton = wrapper.querySelector("[data-action=change-color]");
|
|
var undoButton = wrapper.querySelector("[data-action=undo]");
|
|
var savePNGButton = wrapper.querySelector("[data-action=save-png]");
|
|
var saveJPGButton = wrapper.querySelector("[data-action=save-jpg]");
|
|
var saveSVGButton = wrapper.querySelector("[data-action=save-svg]");
|
|
var canvas = wrapper.querySelector("canvas");
|
|
var signaturePad = new SignaturePad(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)'
|
|
});
|
|
|
|
// Adjust canvas coordinate space taking into account pixel ratio,
|
|
// to make it look crisp on mobile devices.
|
|
// This also causes canvas to be cleared.
|
|
function resizeCanvas() {
|
|
// 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
|
|
canvas.width = canvas.offsetWidth * ratio;
|
|
canvas.height = canvas.offsetHeight * ratio;
|
|
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.
|
|
signaturePad.clear();
|
|
}
|
|
|
|
// On mobile devices it might make more sense to listen to orientation change,
|
|
// rather than window resize events.
|
|
window.onresize = resizeCanvas;
|
|
resizeCanvas();
|
|
|
|
function download(dataURL, filename) {
|
|
if (navigator.userAgent.indexOf("Safari") > -1 && navigator.userAgent.indexOf("Chrome") === -1) {
|
|
window.open(dataURL);
|
|
} else {
|
|
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.
|
|
function dataURLToBlob(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 });
|
|
}
|
|
|
|
clearButton.addEventListener("click", function (event) {
|
|
signaturePad.clear();
|
|
});
|
|
|
|
undoButton.addEventListener("click", function (event) {
|
|
var data = signaturePad.toData();
|
|
|
|
if (data) {
|
|
data.pop(); // remove the last dot or line
|
|
signaturePad.fromData(data);
|
|
}
|
|
});
|
|
|
|
changeColorButton.addEventListener("click", function (event) {
|
|
var r = Math.round(Math.random() * 255);
|
|
var g = Math.round(Math.random() * 255);
|
|
var b = Math.round(Math.random() * 255);
|
|
var color = "rgb(" + r + "," + g + "," + b + ")";
|
|
|
|
signaturePad.penColor = color;
|
|
});
|
|
|
|
savePNGButton.addEventListener("click", function (event) {
|
|
if (signaturePad.isEmpty()) {
|
|
alert("Please provide a signature first.");
|
|
} else {
|
|
var dataURL = signaturePad.toDataURL();
|
|
download(dataURL, "signature.png");
|
|
}
|
|
});
|
|
|
|
saveJPGButton.addEventListener("click", function (event) {
|
|
if (signaturePad.isEmpty()) {
|
|
alert("Please provide a signature first.");
|
|
} else {
|
|
var dataURL = signaturePad.toDataURL("image/jpeg");
|
|
download(dataURL, "signature.jpg");
|
|
}
|
|
});
|
|
|
|
saveSVGButton.addEventListener("click", function (event) {
|
|
if (signaturePad.isEmpty()) {
|
|
alert("Please provide a signature first.");
|
|
} else {
|
|
var dataURL = signaturePad.toDataURL('image/svg+xml');
|
|
download(dataURL, "signature.svg");
|
|
}
|
|
});
|
|
|
|
function SaveImage() {
|
|
if (signaturePad.isEmpty()) {
|
|
alert("Please provide a signature first.");
|
|
return false;
|
|
} else {
|
|
var dataURL = signaturePad.toDataURL('image/png');
|
|
test(dataURL, "signature.svg");
|
|
}
|
|
}
|
|
function test(dataURL, filename) {
|
|
if (navigator.userAgent.indexOf("Safari") > -1 && navigator.userAgent.indexOf("Chrome") === -1) {
|
|
window.open(dataURL);
|
|
} else {
|
|
var blob = dataURLToBlob(dataURL);
|
|
var url = window.URL.createObjectURL(blob);
|
|
|
|
document.getElementById('ContentPlaceHolder1_hddImgURL').value = dataURL.replace('data:image/png;base64,', '');
|
|
}
|
|
}
|