how to resize Base64 image in javascript

Question

I tested this package: https://preview.npmjs.com/package/resize-base64

it requires a front-end part to make Canvas element .. and so on, I only need to make this process without front-end

I use react native, so any solution for React/Native, node, or native javascript is acceptable.

You can try this [solution](https://stackoverflow.com/questions/20958078/resize-a-base-64-image-in-javascript-without-using-canvas) or this [one](https://stackoverflow.com/questions/6944451/how-to-resize-a-base64-encoded-data-uri-png-using-javascript) with javascript — galvan, Jun 24 '18 at 13:39

score 17 · Answer 1 · answered Feb 13 '19 at 07:00

its maybe late, but hope to help the others.

const sharp = require('sharp');

// original base64 image
const base64Image = "data:image/jpeg;base64,/9j/4QDsRXhpZg ...  ...  ... ";

// express route function
export default function (req, res, next) {
    let parts = base64Image.split(';');
    let mimType = parts[0].split(':')[1];
    let imageData = parts[1].split(',')[1];

    var img = new Buffer(imageData, 'base64');
    sharp(img)
        .resize(64, 64)
        .toBuffer()
        .then(resizedImageBuffer => {
            let resizedImageData = resizedImageBuffer.toString('base64');
            let resizedBase64 = `data:${mimType};base64,${resizedImageData}`;
            res.send(resizedBase64);
        })
        .catch(error => {
            // error handeling
            res.send(error)
        })
}

score 1 · Answer 2 · answered Jun 24 '18 at 17:35

You have to do this in steps:

Decode the Base64
Decode the image data
Scale the image
Encode the image
Output the image

Almost all of these steps can be done with Sharp. https://github.com/lovell/sharp This package uses libvips and is significantly faster than any other image scaler in most cases.

how to resize Base64 image in javascript

2 Answers2

Linked