6

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.

2
  • You can try this solution or this one with javascript Commented Jun 24, 2018 at 13:39
  • what about node-canvas? Commented Jun 24, 2018 at 13:59

2 Answers 2

18

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)
        })
}
Sign up to request clarification or add additional context in comments.

Comments

1

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.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.