Apex class for capturing the sign
public class signAccountExtension {
Id accountId;
public string fileData { get; set; }
public signAccountExtension(ApexPages.StandardController controller) {
accountId = controller.getId();
}
public void saveImage() {
insert new Attachment(
ContentType='image/jpeg',
Body=EncodingUtil.base64Decode(fileData),
Name='Signature',
ParentId = accountId
);
}
}
Visual Force Page:
<apex:page standardController="Account" extensions="signAccountExtension">
<style>
#signature {
border: 1px solid black;
}
</style>
<apex:form id="form">
<apex:actionFunction action="{!saveImage}" name="saveImageToServer" reRender="">
<apex:param assignTo="{!fileData}" name="data" value="" />
</apex:actionFunction>
<canvas id="signature" width="400" height="100" />
<button id="save">
Save
</button>
</apex:form>
<script>
!function() {
var canvas, lastX, lastY;
function start(event) {
lastX = event.offsetX;
lastY = event.offsetY;
document.body.addEventListener("mousemove", draw);
document.body.addEventListener("mouseup", end);
}
function draw(event) {
var context = canvas.getContext("2d");
if(event.target === canvas) {
context.fillStyle = "black";
context.strokeStyle = "black";
context.beginPath();
context.moveTo(lastX, lastY);
context.lineTo(event.offsetX, event.offsetY, 3);
context.stroke();
lastX = event.offsetX;
lastY = event.offsetY;
}
event.preventDefault();
}
function end(event) {
document.body.removeEventListener("mousemove", draw);
document.body.removeEventListener("mouseup", end);
canvas.removeEventListener("mouseenter", mouseenter);
event.preventDefault();
}
function save(event) {
event.preventDefault();
saveImageToServer(canvas.toDataURL("image/jpeg").split(/;base64,/)[1]);
}
function init() {
var context;
canvas = document.getElementById("signature");
canvas.addEventListener("mousedown", start);
context = canvas.getContext("2d");
context.fillStyle = "white";
context.fillRect(0, 0, canvas.width, canvas.height);
document.getElementById("save").addEventListener("click", save);
}
window.addEventListener('DOMContentLoaded', init);
}()
</script>
</apex:page>