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.

Answer 1

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)
        })
}

Answer 2

You have to do this in steps:

1. Decode the Base64
2. Decode the image data
3. Scale the image
4. Encode the image
5. 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.