CODEWITHSUNDEEP
javascriptnode.jsreactjsreact-native
27mdmo7sn
27mdmo7sn

Reputation: 509

how to resize Base64 image in javascript

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.

Upvotes: 6

Views: 16793

Answers (2)

Sadegh Teimouri
Sadegh Teimouri

Reputation: 1478

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

Upvotes: 18

Brad
Brad

Reputation: 163272

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.

Upvotes: 1

Related Questions