I have a canvas interface in which the user can draw with a pencil. This image is saved in my database every 2 seconds.
The code behind is as follows:
generateImg: function(start) {
$this = this;
if (start) {
this.config.startInterval = setInterval(function() {
$this.saveBase64String(
$this.config.canvas[0].toDataURL()
);
}, 2000);
} else {
clearInterval(this.config.startInterval);
}
},
I save the image using ajax on my server as follows:
saveBase64String: function(imgData) {
this.ajaxSetup();
$.ajax({
url: '../../stream/store',
type: 'post',
data: {
imgData: imgData,
},
success: function(data) {
console.log('success save base64string');
},
error: function(data) {
console.log("error save base64string");
}
});
},
The program is currently working, but I think it is really bad practice, since I sent a request every 2 seconds. Is there a better way to solve this problem.
Basically I need to save the drawn image on my canvas to my database and update the framed image every second.
utdev source
share