在sails.js或者服务器端JavaScript中，如何将图片转换为Base64编码的数据URL？

Question

我正在使用编写一个小应用程序，需要将图片存储在数据库中。为此，我需要将图像转换为base64编码数据URL，以便将其保存为字符串到我的sails模型中。但是，我不知道如何将其转换成这种形式。所有较旧的问题都涉及将图像转换为base64编码的数据URL，并且它们都是关于在客户端执行此操作的。然而，我想在服务器端执行此操作，同时通过post请求获取图像。我该如何实现？

- Mahammad Adil Azeem

---

你们使用的服务器端技术是什么？ - Nadendla

Answer 1

我理解您想要将一个文件转换为Base64编码的字符串。无论该文件是否为图像，这都无关紧要。

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

用法：

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

源代码

- alandarev

---

如果没有传递编码，fs.readFile会返回一个缓冲区，所以不需要使用new Buffer()。相关文档。 - tleb

不要忘记添加数据URI前缀：data:[<mediatype>][;base64], 例如，在PNG图像的情况下，使用 data:image/png;base64,。更多信息请查看MDN上的数据URI。 - Márton Tamás

新版Node.js中已经废弃了new Buffer()方法。你可以使用fs.readFileSync(file, { encoding: 'base64' });代替它。 - Idan Dagan

Base64只是免费编码，但要创建数据URI，则需要某种mime-db。https://www.npmjs.com/package/mime-types - Polv

Answer 2

你可以使用readFileSync函数来实现，将图片路径作为第一个参数传递，并将编码选项作为第二个参数传递。如下所示:

var fs = require('fs');

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

根据Node文档：

fs.readFileSync(path[, options])

是fs.readFile()的同步版本。返回路径的内容。

如果指定了编码选项，则此函数返回字符串。否则，它将返回缓冲区。

- JSON C11

---

@JSON-C11为什么不使用它的异步版本呢？ - hitautodestruct

我正在尝试在Angular中使用它，但出现了错误：模块未找到：错误：无法解析“fs”。 - GhostDede

如果我有一个URL而不是一个文件，该怎么办... - Naima Ghulam.M

您还可以这样导入 fs 的 promisify 版本：import fs from 'fs/promises';。 - wald3

Answer 3

//您可以使用图像转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);
        }
    )

- chalmer jay jamero

Answer 4

使用Buffer.from的另一种解决方案

1. ES6版本

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();

2. TypeScript版本

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

*/

参考文献

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

- xgqfrms

Answer 5

//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");

- Vagner Kugelmeier Tondello

Answer 6

这里有另一种简单的方法，当您列出图像时可以使用它

@{
    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" />
    }
}

- Sibonelo

---

我不认为这是 JavaScript。 - Manos Kounelakis

Razor语法毕竟如此 - Suhail Mumtaz Awan

不好意思，这个问题是关于JS的，而不是C#或ASP.NET。 - not my real name

这看起来像是C#，问题要求的是Javascript。 - Awah Teh