在节点中将 svg 图像从 url 转换为 base64

Posted

技术标签:

【中文标题】在节点中将 svg 图像从 url 转换为 base64【英文标题】:Convert svg image from url to base64 in node 【发布时间】:2022-01-05 19:43:23 【问题描述】:

我想使用来自urlsvg 图像,将其转换为base64。后来我在社交媒体平台上发布了这张图片。这就是为什么我需要它采用base64 格式。我怎样才能做到这一点?当我的网站上有这张图片时,我知道该怎么做,但是当我只有一个指向该图片的链接时,我该怎么做?

【问题讨论】:

@gre_gor 我为每个图像发出了大约 50 个请求,而且它只是 node 服务器端。我如何在那里下载文件? 【参考方案1】:

这是可以在node.js中使用node-fetch库的简单代码。

import fetch from 'node-fetch';

const download = async () => 
const response = await fetch("https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg");
if (response.ok) 
    const buffer = await response.buffer();
    const base64 = buffer.toString("base64");
    return base64;
    


(async () => 
const data = await download();
console.log("? ~ file: base64.js ~ line 12 ~ data", data);
)();

我正在使用来自 link 的示例 svg 图像。上面的代码将返回示例 svg 图像的 base64:

PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj4KICA8cGF0aCBkPSJNMzAsMWg0MGwyOSwyOXY0MGwtMjksMjloLTQwbC0yOS0yOXYtNDB6IiBzdHJva2U9IiMwMDAiIGZpbGw9Im5vbmUiLz4gCiAgPHBhdGggZD0iTTMxLDNoMzhsMjgsMjh2MzhsLTI4LDI4aC0zOGwtMjgtMjh2LTM4eiIgZmlsbD0iI2EyMyIvPiAKICA8dGV4dCB4PSI1MCIgeT0iNjgiIGZvbnQtc2l6ZT0iNDgiIGZpbGw9IiNGRkYiIHRleHQtYW5jaG9yPSJtaWRkbGUiPjwhW0NEQVRBWzQxMF1dPjwvdGV4dD4KPC9zdmc+Cg==

如果您复制并粘贴此here,您将看到同一图像的预览。瞧!!

【讨论】:

我会检查一下,顺便问一下你如何在 node.js 项目中使用import 你可以使用 babel-node 来使用 ES6 语法。请尝试将其转换为您现有项目的要求,希望它仍然可以正常工作。请使用下载功能里面的东西,这很重要。 代码可以工作,但最大的问题是我不能在 twitter API 中使用 base64,我认为这是因为它们只允许 png 文件而不是 svg 好的太好了!!我认为您需要为与 Twitter 相关的事情找到解决方法。如果以上内容回答了您提出的问题,请接受并投票。谢谢

以上是关于在节点中将 svg 图像从 url 转换为 base64的主要内容,如果未能解决你的问题,请参考以下文章

如何在 ASP.NET 中将 base64 图像 URL 转换为用户友好 URL

在使用canvas api在浏览器中将svg转换为png时,svg中的嵌入图像在Safari中随机空白

在浏览器中将 SVG 转换为图像(JPEG、PNG 等)

如何在 Python 中将 SVG 图像渲染为 PNG 文件?

在 Javascript 中将图像 url 转换为 blob

如何在asp.net web api中将图像路径转换为http url?