0

I am working on a node+express backend.

I am receiving base64 images string from API and I am storing it into MongoDB. Before storing I want to reduce the image size (scaling). I tried JIMP but it is not reading base64 input.

Can anyone please suggest any good node module which accepts base64 image, scale it and return a new base64 string.

Thanks

raju
  • 6,448
  • 24
  • 80
  • 163
  • Your question seems to be off-topic, [as it asking us to recommend or find a software library](https://stackoverflow.com/help/on-topic). I suggest have a look at [software recommendations](https://softwarerecs.stackexchange.com). – Farid Nouri Neshat Oct 07 '17 at 11:32
  • can try that, https://www.npmjs.com/package/resize-base64 – Atk Nov 02 '17 at 13:41
  • Any updates to what you ended up using? – jdmdevdotnet Jan 09 '18 at 17:35
  • Does this answer your question? [how to resize Base64 image in javascript](https://stackoverflow.com/questions/51010423/how-to-resize-base64-image-in-javascript) – NeNaD Sep 02 '21 at 04:23

3 Answers3

1

A little late but I just implemented this feature using the sharp library, so might as well share it now.

I created a function that takes a base64 and the height and width (optional) you want to resize the image to and returns the resized base64 string.

I can just call this function whenever I want.

Code

// Don't forget to import sharp
import sharp from "sharp"

export const resizeBase64 = async ({ base64Image, maxHeight = 640, maxWidth = 640 }) => {
  const destructImage = base64Image.split(";");
  const mimType = destructImage[0].split(":")[1];
  const imageData = destructImage[1].split(",")[1];

  try {
    let resizedImage = Buffer.from(imageData, "base64")
    resizedImage = await sharp(resizedImage).resize(maxHeight, maxWidth).toBuffer()
    
    return `data:${mimType};base64,${resizedImage.toString("base64")}`
  } catch (error) {
    throwError({ error })
  }
};
Haseeb Burki
  • 676
  • 2
  • 8
  • 23
0

You can still use JIMP, but all you need to do is to drop the prefix before reading the base64.

Depend on your image format use a specific jpg or png in the following example.

Example:

    Jimp.read(Buffer.from((yourImageBuffer).replace(/^data:image\/png;base64,/, ""), 'base64'), function (err, image) {
// Do you stuff here with the image
})
Ahmad Vakil
  • 31
  • 5
-1
....some logic....

    let max_width = 371;
    let max_height = 280;

    var image = new Image();
    image.src = YOUR_BASE64_STRING;

    let image_width = image.width;
    let image_height = image.height;

    let ratio = 1;

    if(image_width > max_length || image_height > max_length){  //need to scale

        ratio = max_length / image_width;

        if(image_height > image_width){
            ratio =  max_length / image_height;
        }            
    }


    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");
    canvas.width = image_width * ratio; // target width
    canvas.height = image_height * ratio; // target height


    ctx.drawImage(image, 
        0, 0, image.width, image.height, 
        0, 0, canvas.width, canvas.height
    );

    var RESIZED_BASE64_STRING = canvas.toDataURL();
....some logic....
Atk
  • 149
  • 7