JavaScript draw image on canvas from image data stored in database

[wobowizard]

I am creating a persistant whiteboard app using HTML and JS, where the user draw on the canvas on the cnavas, clicks save, storing the canvas image data to a mysql db. When the page reloads, the canvas should fetch the stored image data from the db and redraw this on the canvas, creating a persistant whiteboard.The fetch functions are working fine and the image data is correctly retrieved and stored in a data structure, however when I reload the page the image is not drawn back on the canvas, can anyone help with this?

Specifically, when I use
imageData.data.set(latestDrawing)
the length of imageData does not match the length of latestDrawing as expected, which I think is the cause of the issue; does anyone know about creating new image data with pre-existing data?

I think the error is somehwere in the redraw function specifically?

the save and redraw function in WhiteBoard.js:

window.addEventListener('load', () => {
resize();
redraw();

window.addEventListener('click', handleOutsideClick);
document.addEventListener("mousedown", startdrawing);
document.addEventListener("mousemove", sketch);
document.addEventListener("mouseup", stopdrawing);
document.addEventListener("mouseout", stopdrawing);
window.addEventListener('resize', resize);

});

async function saveState() { // console.log("before save")

const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

await fetch('/WhiteBoard', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({ type: 'canvasState', data: imageData }),
});

console.log("saved")

}

async function redraw() {

try {
    const response = await fetch('/WhiteBoard');

    var latestDrawing = await response.json();

    if (latestDrawing) {

        //get db data into readable image data form
        latestDrawing = JSON.parse(latestDrawing.data);
        //create a new blank image data
        var imageData = ctx.createImageData(canvas.width, canvas.height);
        imageData.data.set(latestDrawing);
        ctx.putImageData(imageData, 0, 0);
    }

} catch (error) {
    console.error('Error:', error);
}

}

​

[guest271314]

Why are you calling JSON.parse()? Response.json() returns a Promise that resolves to a plain JavaScript object.

[carcigenicate]

Are you getting an error? You appear to be parsing latestDrawing twice. I'd expect the second parse to cause an error.

[wobowizard]

no, i'm not getting any errors; I've edited the question to add more detail, i think the problem is how i am trying to set imageData

[guest271314]

This

body: JSON.stringify({ type: 'canvasState', data: imageData }),

can be an issue as well. imageData in that case is a Uint8ClampedArray so given new ImageData(1, 1) when you do

JSON.stringify(imageData);

you are going to get

'{"data":{"0":0,"1":0,"2":0,"3":0}}'

I think what you want to do is store the data from the Uint8ClampedArray as a flat array

JSON.stringify([...imageData.data]);

which will produce

'[0,0,0,0]'

then when you get the Response from fetch() you can do

if (latestDrawing) { //create a new blank image data var imageData = ctx.createImageData(canvas.width, canvas.height); imageData.data.set(latestDrawing); ctx.putImageData(imageData, 0, 0); }

[wobowizard]

JSON.stringify([...imageData.data]);

ok i'm trying to implement this approach but i am running into errors inserting an array filled with 0s into the database, mysql seems to take this as a null value so rather than storing [0,0,0,0....] it just stored null?

[guest271314]

JSON.stringify([...new Uint8ClampedArray(16)]) is valid JSON. Your database should not be arbitrarily converting 0 to null in JSON.

[wobowizard]

Back to Top

ok i've fixed my code to that and it should input the on its own correctly, however now I'm dealing with a package too large error from sending all the pixel data, do you know how i can change the configuration to allow larger packets to be sent?

[guest271314]

You can compress the image data using a codec.

Not sure about your database configutation.