Save image from canvas permanently to server

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.

+4
source share

Source: https://habr.com/ru/post/1695207/


All Articles