Question: How can i save canvas with the background image?

[Mwlm]

I have a background image and would like to draw some lines on top of the image. I would like to save canvas with my background image.

[embiem]

Hey, sorry but this is currently not possible without extra code. I've tracked your request in #43, as other people have articulated their need to save the drawing to an image as well.

[zemiacsik]

If someone is still interested in this. I have just used @embiem advice in #43 with some stackoverflow and put canvases on top each other:

let baseCanvas = canvasRef.current.canvasContainer.children[3]; // canvas with background image let baseCanvasContex = rootCanvas.getContext('2d'); baseCanvasContex.drawImage(canvasRef.current.canvasContainer.children[1], 0, 0); // add drawing return baseCanvas.toDataURL(); // or whatever

canvasRef is CanvasDraw

• children[0] is canvas with cursor/pointer
• children[1] is canvas with drawing
• children[2] is canvas with interface
• children[3] is (or seems to be) canvas with background image (imgSrc)

[jonra1993]

Hello, using @zemiacsik approach and combining some code from forums online I created this function. I hope It can help to someone in the future.

export const combineDrawing = (canvasRef) => {
    const width = canvasRef.current.props.canvasWidth;
    const height = canvasRef.current.props.canvasHeight;
    const background = canvasRef.current.canvasContainer.children[3]; 
    const drawing = canvasRef.current.canvasContainer.children[1]; 

    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;

    // composite now
    canvas.getContext('2d').drawImage(background, 0, 0);
    canvas.getContext('2d').globalAlpha = 1.0; 
    canvas.getContext('2d').drawImage(drawing, 0, 0);

    const dataUri = canvas.toDataURL('image/jpeg', 1.0);
    const data = dataUri.split(',')[1];
    const mimeType = dataUri.split(';')[0].slice(5);

    const bytes = window.atob(data);
    const buf = new ArrayBuffer(bytes.length);
    const arr = new Uint8Array(buf);

    for (let i = 0; i < bytes.length; i++) {
        arr[i] = bytes.charCodeAt(i);
    }

    const blob = new Blob([arr], { type: mimeType });
    return { blob: blob, dataUri: dataUri };
}

export const saveImage = (blob, filename) => {
    const a = document.createElement('a');
    document.body.appendChild(a);
    a.style = 'display: none';

    const url = window.URL.createObjectURL(blob);
    a.href = url;
    a.download = filename;
    a.click();
    window.URL.revokeObjectURL(url);
}

const {blob, dataUri} = combineDrawing(canvasRef);
 saveImage(blob, 'test.jpg')

[sasithahtl]

Hello, using @zemiacsik approach and combining some code from forums online I created this function. I hope It can help to someone in the future.

export const combineDrawing = (canvasRef) => {
    const width = canvasRef.current.props.canvasWidth;
    const height = canvasRef.current.props.canvasHeight;
    const background = canvasRef.current.canvasContainer.children[3]; 
    const drawing = canvasRef.current.canvasContainer.children[1]; 

    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;

    // composite now
    canvas.getContext('2d').drawImage(background, 0, 0);
    canvas.getContext('2d').globalAlpha = 1.0; 
    canvas.getContext('2d').drawImage(drawing, 0, 0);

    const dataUri = canvas.toDataURL('image/jpeg', 1.0);
    const data = dataUri.split(',')[1];
    const mimeType = dataUri.split(';')[0].slice(5);

    const bytes = window.atob(data);
    const buf = new ArrayBuffer(bytes.length);
    const arr = new Uint8Array(buf);

    for (let i = 0; i < bytes.length; i++) {
        arr[i] = bytes.charCodeAt(i);
    }

    const blob = new Blob([arr], { type: mimeType });
    return { blob: blob, dataUri: dataUri };
}

export const saveImage = (blob, filename) => {
    const a = document.createElement('a');
    document.body.appendChild(a);
    a.style = 'display: none';

    const url = window.URL.createObjectURL(blob);
    a.href = url;
    a.download = filename;
    a.click();
    window.URL.revokeObjectURL(url);
}

const {blob, dataUri} = combineDrawing(canvasRef);
 saveImage(blob, 'test.jpg')

used this to make the work

[lablitt]

Thanks for this function is really helpful, only change I had to make was change the background image index from 3 to 0, so its const background = canvasRef.current.canvasContainer.children[0];