I’m working on a project that uses the SignaturePad library from here to save digital signatures from clients, so far I’ve managed to draw and save an image, displaying the saved image on the browser didn’t gave any problem, but when I tried on my Samsung Galaxy Tab S2, the image looked zoomed in.
Let me explain more clearly the workflow on my app:
- First you create an activity, which is then added to a list with other activities.
- When you select an activity, you can check it in, at this phase you can add the signature to the activity.
- Pressing a button on the activity view displays the SignaturePad where the user can draw the signature. When done a press of the save button will close the SignaturePad and save the image data url.
- When the user wants to check out the activity, a view to review the activity is shown, one of the options allows to view the signature saved.
- The signature is presented on a SignaturePad just in case the signature need to be redone, this is when the original image appears zoomed in on the canvas.
Look at this image of the signature drawn and before saving it:
To the same image, loaded on a the SignaturePad’s canvas, all zoomed in as it appears:
This is how I’m drawing the image:
function loadSignatureIfExists(canvasPad){
if($scope.activity.signature){
var imgObj = new Image();
imgObj.onload = function () {
canvasPad.getContext('2d').drawImage(this, 0, 0);
}
imgObj.src = $scope.getSignatureFile($rootScope.activity.signature);
}
}
And this is the rest of the code that involves my SignaturePad implementation:
$scope.openSignatureModal = function(){
var signatureModal = createSignatureModal();
signatureModal.then(function(modal) {
$scope.modal = modal;
$scope.modal.show();
canvasPad = document.getElementById("signature-pad");
loadSignatureIfExists(canvasPad);
$scope.resizeCanvas();
signaturePad = new SignaturePad(canvasPad, {
backgroundColor: 'rgba(255, 255, 255, 1)'
});
signaturePad.minWidth = 1;
signaturePad.maxWidth = 1.5;
signaturePad.dotSize = 3;
signaturePad.penColor = "rgb(66, 133, 244)";
});
}
And this is how I save the image:
$scope.saveSignature = function() {
if (signaturePad.isEmpty()) {
alert("Por favor firme");
} else {
var rawImage = signaturePad.toDataURL('image/jpeg');
$scope.activity.signature = rawImage.substring(rawImage.indexOf(',') + 1);
$scope.closeSignatureModal();
}
};
Why is the image not being rendered properly on the canvas? Why is it that on web it looks fine but on mobile looks zoomed in?