nodejs base64 image response is not coming as image object. when adding header {'Content-Type': 'image/jpeg or png'}

Question

When I am generating image on the server side & getting base64 image string.

Which I want to send as image object. It is working properly with node-canvas by creating image stream.

    let stream = this.canvas.jpegStream({progressive: true});

    this.res.writeHead(200, {
        'Content-Type': 'image/jpeg'
    });
    stream.on('data', (chunk) => {
        this.res.write(chunk);
    });
    stream.on('end', () => {
        this.res.end(); 
    });
// Working perfectly...!

But when I am using fabric.js it was returning direct base64 image instead of base64 stream like node-canvas. When I was sending base64 as response the image is coming blank.

    this.res.writeHead(200, {
        'Content-Type': 'image/png'
    });
    this.res.write(this.fabricCanvas.toDataURL());
    this.res.end();

score 0 · Answer 1 · answered Jan 15 '19 at 22:42

Content-Type: image/png is not the correct header to use with a data: URL.

You can try one of these:

// Preferred: returns a PNG-encoded image buffer
this.fabricCanvas.toBuffer()

// Wasteful - goes from binary to base64 and back
Buffer.from(this.fabricCanvas.toDataURL().split(",")[1], "base64")

nodejs base64 image response is not coming as image object. when adding header {'Content-Type': 'image/jpeg or png'}

1 Answers1