전자서명, 사인 이미지
페이지 정보
본문
<style>
#sig-canvas {
border: 2px dotted #CCCCCC;
border-radius: 15px;
cursor: crosshair;
}
</style>
<!-- Content -->
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>E-Signature</h1>
<p>Sign in the canvas below and save your signature as an image!</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<canvas id="sig-canvas" width="620" height="160">
Get a better browser, bro.
</canvas>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button class="btn btn-primary" id="sig-submitBtn">Submit Signature</button>
<button class="btn btn-default" id="sig-clearBtn">Clear Signature</button>
</div>
</div>
<br/>
<div class="row">
<div class="col-md-12">
<textarea id="sig-dataUrl" class="form-control" rows="5">Data URL for your signature will go here!</textarea>
</div>
</div>
<br/>
<div class="row">
<div class="col-md-12">
<img id="sig-image" src="" alt="Your signature will go here!"/>
</div>
</div>
</div>
<script>
(function() {
window.requestAnimFrame = (function(callback) {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimaitonFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
const line_color = "#000000";
const line_width = 3;
var canvas = document.getElementById("sig-canvas");
var ctx = canvas.getContext("2d");
ctx.strokeStyle = line_color;
ctx.lineWidth = line_width;
var drawing = false;
var mousePos = {
x: 0,
y: 0
};
var lastPos = mousePos;
canvas.addEventListener("mousedown", function(e) {
drawing = true;
lastPos = getMousePos(canvas, e);
}, false);
canvas.addEventListener("mouseup", function(e) {
drawing = false;
}, false);
canvas.addEventListener("mousemove", function(e) {
mousePos = getMousePos(canvas, e);
}, false);
// Add touch event support for mobile
canvas.addEventListener("touchstart", function(e) {
if (e.target == canvas) {
e.preventDefault();
}
}, false);
canvas.addEventListener("touchmove", function(e) {
var touch = e.touches[0];
var me = new MouseEvent("mousemove", {
clientX: touch.clientX,
clientY: touch.clientY
});
canvas.dispatchEvent(me);
}, false);
canvas.addEventListener("touchstart", function(e) {
mousePos = getTouchPos(canvas, e);
var touch = e.touches[0];
var me = new MouseEvent("mousedown", {
clientX: touch.clientX,
clientY: touch.clientY
});
canvas.dispatchEvent(me);
}, false);
canvas.addEventListener("touchend", function(e) {
var me = new MouseEvent("mouseup", {});
canvas.dispatchEvent(me);
}, false);
function getMousePos(canvasDom, mouseEvent) {
var rect = canvasDom.getBoundingClientRect();
return {
x: mouseEvent.clientX - rect.left,
y: mouseEvent.clientY - rect.top
}
}
function getTouchPos(canvasDom, touchEvent) {
var rect = canvasDom.getBoundingClientRect();
return {
x: touchEvent.touches[0].clientX - rect.left,
y: touchEvent.touches[0].clientY - rect.top
}
}
function renderCanvas() {
if (drawing) {
ctx.moveTo(lastPos.x, lastPos.y);
ctx.lineTo(mousePos.x, mousePos.y);
ctx.stroke();
lastPos = mousePos;
}
}
// Prevent scrolling when touching the canvas
document.body.addEventListener("touchstart", function(e) {
if (e.target == canvas) {
e.preventDefault();
}
}, false);
document.body.addEventListener("touchend", function(e) {
if (e.target == canvas) {
e.preventDefault();
}
}, false);
document.body.addEventListener("touchmove", function(e) {
if (e.target == canvas) {
e.preventDefault();
}
}, false);
(function drawLoop() {
requestAnimFrame(drawLoop);
renderCanvas();
})();
function clearCanvas() {
canvas.width = canvas.width;
ctx.lineWidth = line_width;
}
// Set up the UI
var sigText = document.getElementById("sig-dataUrl");
var sigImage = document.getElementById("sig-image");
var clearBtn = document.getElementById("sig-clearBtn");
var submitBtn = document.getElementById("sig-submitBtn");
clearBtn.addEventListener("click", function(e) {
clearCanvas();
sigText.innerHTML = "Data URL for your signature will go here!";
sigImage.setAttribute("src", "");
}, false);
submitBtn.addEventListener("click", function(e) {
var dataUrl = canvas.toDataURL();
sigText.innerHTML = dataUrl;
sigImage.setAttribute("src", dataUrl);
}, false);
})();
</script>
관련자료
-
링크
