I have a board game application and I want to extend that application to enable the user to make drawings on the game area through canvas and save game state, including the canvas drawings on a MySQL database, and access those screenshots later. Now I was searching for methods how I could save a canvas drawing on a database. I thought I might extract the ImageData object through the function getImageData(). Now that Object includes a big array which eventually represents the pixels of the canvas image. I could convert the data included in the array to text to be able to save it on the database. When I want to access that canvas drawing later, I can call that text representing the pixel array from the database and convert it to an array again on the client side to be able to build the ImageData object again and put it into the canvas.
Now it turned out that the text representing the array could have a size of 5 mega bytes! I might want to call dozents of screenshots for a user from the server, so dozents of 5 mega bytes.
My question is: Is there a more efficient way to save canvas drawing on the server? Is the described way good or efficient, could it be made in a better way?
You normally wouldn't store 5 MB images in a database, you would store the image as a file on the server, and put an entry in the database that refers to that file.
When storing image data you can use compression. ZIP for instance, but image formats like JPEG have build-in compression.
The best way to do this, however, is not to store the image, but remember the state of the game and the input from the user. This requires far less storage space. You can reconstruct the canvas using this data.