CODEWITHSUNDEEP
javascriptnode.jssails.js
Mahammad Adil Azeem
Mahammad Adil Azeem

Reputation: 9392

How do I convert an image to a base64-encoded data URL in sails.js or generally in the servers side JavaScript?

I am making a small app in sails.js and I need to store images in database. For that, I need to convert an image to a base64-encoded data URL so that I can save it as a string in my sails models. However, I don't know how to convert it in this form. All the older questions asked about converting an image to base64-encoded data URLs, and they answer this about doing it on the client side. However, I want to do it on the server side while I will be getting the image through a post request. How can I achieve this?

Upvotes: 95

Views: 192471

Answers (7)

Sardar Ahmed Khan
Sardar Ahmed Khan

Reputation: 133

I have solved this as in my case, I am getting the image from the file system and then using that image to make the base64 conversion. I perfectly achieved it. You can also. Thanks

 function encodeImageToBase64(filePath: string): string {
  try {
    const image = fs.readFileSync(filePath);
    return Buffer.from(image).toString("base64");
  } catch (error) {
    if (error instanceof Error) {
      throw new Error(
        `Failed to read or encode image at path: ${filePath}. Error: ${error.message}`
      );
    } else {
      throw new Error(
        `Failed to read or encode image at path: ${filePath}. Unknown error occurred.`
      );
    }
  }
}
 // Convert the image to Base64
  const base64Image = encodeImageToBase64(imagePath);
  const imageFormat = imagePath.split(".").pop()?.toLowerCase() || "jpg";

  // Validate image format
  if (!["jpg", "jpeg", "png"].includes(imageFormat)) {
    throw new Error(
      "Unsupported image format. Please upload a jpg, jpeg, or png file."
    );
  }

Upvotes: 0

xgqfrms
xgqfrms

Reputation: 12156

Another solution to use the Buffer.from

  1. ES6 version
import fs from 'node:fs';

const convertImageToBase64URL = (filename, imageType = 'png') => {
  try {
    const buffer = fs.readFileSync(filename);
    const base64String = Buffer.from(buffer).toString('base64');
    // console.log(`base64String`, base64String.slice(0, 100));
    return `data:image/${imageType};base64,${base64String}`;
  } catch (error) {
    throw new Error(`file ${filename} no exist ❌`)
  }
}

export {
  convertImageToBase64URL,
};

// test cases
const ok = convertImageToBase64URL("./public/test.png");
const err = convertImageToBase64URL();
  1. TypeScript version
import fs from 'node:fs';

type Filename = string;
type ImageType = 'png' | 'jpg' | 'jpeg' | 'gif' | 'webp';
type Base64String = `data:image/${ImageType};base64,${string}`;

const convertImageToBase64URL = (filename: Filename, imageType: ImageType = 'png'): Base64String => {
  try {
    const buffer = fs.readFileSync(filename);
    const base64String = Buffer.from(buffer).toString('base64');
    // console.log(`base64String`, base64String.slice(0, 100));
    return `data:image/${imageType};base64,${base64String}`;
  } catch (error) {
    throw new Error(`file ${filename} no exist ❌`)
  }
}

export {
  convertImageToBase64URL,
};

// test cases
const ok = convertImageToBase64URL("./public/test.png");
const err = convertImageToBase64URL();
/* 

Expected 1-2 arguments, but got 0.ts(2554)
An argument for 'filename' was not provided.
const convertImageToBase64URL: (filename: Filename, imageType?: ImageType) => Base64String

*/

refs

https://nodejs.org/api/buffer.html#static-method-bufferfrombuffer

Upvotes: 6

chalmer jay jamero
chalmer jay jamero

Reputation: 43

//You can use the image-to-base64

const imageToBase64 = require('image-to-base64');

imageToBase64("URL") // insert image url here. 
    .then( (response) => {
          console.log(response);  // the response will be the string base64.
      }
    )
    .catch(
        (error) => {
            console.log(error);
        }
    )

Upvotes: 1

Vagner Kugelmeier Tondello
Vagner Kugelmeier Tondello

Reputation: 19

//instala via npm
npm install --save image-to-uri

//declara no codigo
const imageToUri = require('image-to-uri');

//implementa 
let imagem = imageToUri("caminho da sua imagem");

Upvotes: -3

JSON C11
JSON C11

Reputation: 11802

It can be achieved with readFileSync, passing in the image path as the first parameter and an encoding option as the second. As show below:

var fs = require('fs');

var imageAsBase64 = fs.readFileSync('./your-image.png', 'base64');

As per the node documentation:

fs.readFileSync(path[, options])

Synchronous version of fs.readFile(). Returns the contents of the path.

If the encoding option is specified then this function returns a string. Otherwise it returns a buffer.

Upvotes: 120

Sibonelo
Sibonelo

Reputation: 25

Here`s another simple way, use it when listing your images

@{
    if (item.ImageData != null)
    {
        string imageBase64 = Convert.ToBase64String(item.ImageData);
        string imageSrc = string.Format("data:image/gif;base64,{0}", imageBase64);
        <img src="@imageSrc" width="100" height="100" />
    }
}

Upvotes: -14

alandarev
alandarev

Reputation: 8635

As I understand you want to convert a file into base64 encoded string. Whether the file is image or not, that does not matter.

var fs = require('fs');

// function to encode file data to base64 encoded string
function base64_encode(file) {
    // read binary data
    var bitmap = fs.readFileSync(file);
    // convert binary data to base64 encoded string
    return new Buffer(bitmap).toString('base64');
}

Usage:

var base64str = base64_encode('kitten.jpg');

Source

Upvotes: 158

Related Questions