1 resposta
Hi Sai,Hoping this helps.I created a custom button on a custom object that launches a Visualforce page to capture the signature of a user. The Visualforce page has two buttons: Capture Signature and Exit. Upon clicking Capture Signature, the canvas is captured and attached in the Notes and Attachments related list of the record. Visual Force Page:<apex:page docType="html-5.0" standardController="EHS_Procedure__c" extensions="ehsSignatureExtensionController"><script>var $j = jQuery.noConflict();</script><apex:stylesheet value="{!URLFOR($Resource.jquerymobile,'/jquerymobile/jquery.mobile-1.3.2.min.css')}"/><apex:includeScript value="{!URLFOR($Resource.jquery)}" /><apex:includeScript value="{!URLFOR($Resource.jquerymobile,'/jquerymobile/jquery.mobile-1.3.2.min.js')}"/><canvas id="signatureCanvas" width="315" height="400" style="border: 1px solid white;"/> <apex:includeScript value="/soap/ajax/28.0/connection.js"/><script>sforce.connection.sessionId = "{!$Api.Session_Id}";var canvas = document.getElementById("signatureCanvas");var context = canvas.getContext("2d");var mouseButton = 0;var lastX = lastY = null;var ehsId = '{!EHS_Procedure__c.Id}';function saveSignature() { var image = canvas.toDataURL().split(',')[1]; ehsSignatureExtensionController.saveSignature(ehsId,image,handleResult);}function handleResult(result,event) { if(result.success) { window.top.location.href='/'+ehsId; } else { alert('Error: '+result.errorMessage); }}function handleEvent(event) { if(event.type==="mousedown"||event.type==="touchstart") { mouseButton = event.which || 1; lastX = lastY = null; } if(event.type==="touchcancel" || event.type==="touchcancel" || event.type==="mouseup") { mouseButton = 0; lastX = lastY = null; } if((event.type==="touchmove" || event.type==="mousemove") && mouseButton) { var newX, newY; var canvasX = 0, canvasY = 0, obj = event.srcElement || event.target; do { canvasX += obj.offsetLeft; canvasY += obj.offsetTop; } while(obj = obj.offsetParent); if(event.targetTouches && event.targetTouches.length) { newX = event.targetTouches[0].clientX - (canvasX/2); newY = event.targetTouches[0].clientY - (canvasY/2); } else { newX = event.offsetX; newY = event.offsetY; } if(!lastX && !lastY) { lastX = newX; lastY = newY; context.beginPath(); context.moveTo(lastX,lastY); context.lineTo(lastX,lastY,lastX,lastY); context.stroke(); } else { context.beginPath(); context.moveTo(lastX,lastY); context.lineTo(newX,newY); context.stroke(); lastX = newX; lastY = newY; } } if(event.type=="touchmove" || event.type==="mousedrag" || (event.type==="selectstart" && (event.srcElement||event.target)===canvas)) { event.returnValue=false; event.stopPropagation(); event.preventDefault(); return false; }}canvas.addEventListener("mousedrag",handleEvent,true);canvas.addEventListener("mousemove",handleEvent,true);canvas.addEventListener("mousedown",handleEvent,true);window.addEventListener("mouseup",handleEvent,true);canvas.addEventListener("touchstart",handleEvent,true);canvas.addEventListener("touchmove",handleEvent,true);window.addEventListener("touchend",handleEvent,true);window.addEventListener("selectstart",handleEvent,true);</script><apex:form > <button onclick="saveSignature()">Capture Signature</button> <apex:commandButton action="{!cancel}" value="Exit"/></apex:form></apex:page>Apex Controller:public with sharing class ehsSignatureExtensionController {private final EHS_Procedure__c ehs;public ehsSignatureExtensionController(ApexPages.StandardController controller) { ehs = (EHS_Procedure__c)controller.getRecord();}@RemoteAction public static RemoteSaveResult saveSignature(Id ehsId, String signatureBody) { Attachment a = new Attachment(ParentId=ehsId, name='Signature.png', ContentType='image/png', Body=EncodingUtil.base64Decode(signatureBody)); Database.saveResult result = Database.insert(a,false); RemoteSaveResult newResult = new RemoteSaveResult(); newResult.success = result.isSuccess(); newResult.attachmentId = a.Id; newResult.errorMessage = result.isSuccess()?'':result.getErrors()[0].getMessage(); return newResult;}public class RemoteSaveResult { public Boolean success; public Id attachmentId; public String errorMessage;}public pageReference cancel(){ pageReference page = new PageReference('/'+ehs.id); page.setRedirect(true); return page;}}For more information please check with the below threads.https://corycowgill.blogspot.sg/2013/12/capturing-signatures-with-html5-canvas.htmlhttp://teach-force.blogspot.sg/2014/02/capture-signature-on-ipad-using.htmlI hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.Thanks.
