如何在sails.js 或通常在服务器端JavaScript 中将图像转换为base64 编码的数据URL？

Posted 2023-02-22

【中文标题】如何在sails.js 或通常在服务器端JavaScript 中将图像转换为base64 编码的数据URL？

【英文标题】：How do I convert an image to a base64-encoded data URL in sails.js or generally in the servers side JavaScript?

【发布时间】：2014-08-22 19:07:01

【问题描述】：

我正在sails.js 中制作一个小应用程序，我需要将图像存储在数据库中。为此，我需要将图像转换为 base64 编码的数据 URL，以便可以将其保存为我的风帆模型中的字符串。但是，我不知道如何以这种形式转换它。所有关于将图像转换为 base64 编码的数据 URL 的旧问题，他们都回答了关于在客户端执行此操作的问题。但是，我想在服务器端执行此操作，同时我将通过发布请求获取图像。我怎样才能做到这一点？

【问题讨论】：

你的服务器端技术是什么？

【参考方案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');

Source

如果没有通过编码，

fs.readFile 会提供一个缓冲区，因此不需要new Buffer()。 Related doc.

不要忘记添加数据 URI 前缀：data:[<mediatype>][;base64], 例如：data:image/png;base64,，如果是 PNG 图像。更多信息：Data URIs on MDN

new Buffer() 已弃用。您可以改用 fs.readFileSync(file, encoding: 'base64' );

base64 编码仅是免费的，但要创建 dataURI，需要某种 mime-db。 npmjs.com/package/mime-types

【参考方案2】：

可以通过readFileSync来实现，第一个参数传入图像路径，第二个参数传入一个编码选项。如下图：

var fs = require('fs');

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

根据node 文档：

fs.readFileSync(path[, options])

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

如果指定了编码选项，则此函数返回一个 细绳。否则返回一个缓冲区。

【讨论】：

@JSON-C11 为什么不使用这个的异步版本？

我尝试在 Angular 中使用它并收到错误：找不到模块：错误：无法解析 'fs'

【参考方案3】：

//可以使用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);
        
    )

【参考方案4】：

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

【参考方案5】：

这是另一种简单的方法，在列出图片时使用它

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

【讨论】：

我认为这根本不是 javascript

Razor 语法毕竟

不好意思，这个问题是关于 JS，而不是 C# 或 ASP.NET。

这看起来像 C#，问题是要求 Javascript