I'm currently working on developing an ionic app that includes the feature of allowing users to sign their name on a canvas. I am utilizing signature-pad.js from https://github.com/szimek/signature_pad to create this signature functionality.
Everything runs smoothly when testing the app on a browser.
https://i.sstatic.net/lldkp.png
However, when running the app on an Android emulator, it experiences freezing issues upon navigating to the signature page.
The code for the controller handling the signature page is as follows:
(function() {
angular.module('ValShip').controller('signatureCtrl', signatureCtrl);
signatureCtrl.$inject = ['$cordovaFileTransfer','$state', '$stateParams','$ionicPopup', '$log'];
function signatureCtrl($cordovaFileTransfer,$state, $stateParams, $ionicPopup, $log) {
var vm = this;
var wrapper = document.getElementById("signature-pad"),
clearButton = wrapper.querySelector("[data-action=clear]"),
saveButton = wrapper.querySelector("[data-action=save]"),
canvas = wrapper.querySelector("canvas"),
signaturePad;
window.onresize = resizeCanvas;
resizeCanvas();
signaturePad = new SignaturePad(canvas);
clearButton.addEventListener("click", function (event) {
signaturePad.clear();
});
saveButton.addEventListener("click", function (event) {
if (signaturePad.isEmpty()) {
// notify the user that the signature is empty
$ionicPopup.alert({
title: 'Signature pad is empty.',
template: 'Please provide signature first.'
});
} else {
$log.debug('TODO: Send png.');
// Destination URL
var url = "http://foo/upload/upload.php";
//File for Upload
var targetPath = signaturePad.toDataURL("image/png", 1.0);
// File name only
var filename = ""+$stateParams.id +".png";
var options = {
fileKey: "file",
fileName: filename,
chunkedMode: false,
mimeType: "image/png",
params : {'directory':'upload', 'fileName':filename}
};
$cordovaFileTransfer.upload(url, targetPath, options).then(function (result) {
$log.debug("SUCCESS: " + JSON.stringify(result.response));
}, function (err) {
$log.debug("ERROR: " + JSON.stringify(err));
}, function (progress) {
// PROGRESS HANDLING GOES HERE
});
signaturePad.clear();
// notify the user that the signature is empty
$ionicPopup.alert({
title: 'Success!',
template: 'Signature saved.'
});
$state.go("app.master-bill", {id: $stateParams.id});
}
});
//PROBLEM IS SOMEWHERE IN HERE!!!!
function resizeCanvas(){
var ratio = Math.max(window.devicePixelRatio || 1, 1);
canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;
canvas.getContext("2d").scale(ratio, ratio);
}
};
})();
It's evident that the issue lies within the resizeCanvas() function since removing it resolves the freezing problem but distorts the appearance of the drawn signature. How can I modify the resizeCanvas function to resolve this? Thank you in advance.