JS：如何将image.png编码为base64数据URI嵌入式代码？

Question

我有几个不同尺寸的.png位图，例如 ./img/dog.png 和 ./img/cat.png。如何通过JS加载我的图像的base64字符串？ 我期望的数据类似于以下内容（但更长）：

 data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB9AAAAfQCAYAAACaOMR5AAAgAElEQ…ECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAicCwy83crEe3e04AAAAABJRU5ErkJggg==

---

注意：我希望得到的是我的文件，不被切割也不变得更大。然后，我会将其嵌入到SVG的<image>元素中，如下所示：

<image href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB9AYAAACaOMR5AAAgAElyuiRTYUdG
EQVR4XuydB5RdZfW3nZlk0gukk4QUQiCQEEil994RFBCkigpir4j+7V2xgygiIIgggoBUQTqkQIAACQktCamk90m
yfc8492u1/PdqSlMwslaWTNz7zlv2W/d+7f3b5e8r4H/fvzjH+/3pS996akGvva+b37zm4d27Nhx5Wc+85mxNb3r
7xhtvdFi3bl1VWVnZ2ptuumldVVXVIS+88MLAo4466tlPfOIT459//vmOe+2115L61E07D1i2bFmL7373uw/V5/n
GPEOfSs8666zmq1atasa/dbvvvvva73znOwffeOONp5SXl1e89NJLX37xxRfb3HHHHatbtmy5//XXX3/yRz7ykds
+//nPP92Y+nzntddea8+PNchi/Qc/+MHKb33rW4d84xvfeMR62rdvXzl+/Ph1yKjZzjvvvMZnly5duvquu+46sHX
r1mtow7pDDjnk5aFDh64s1F/Czw3+/tvf/nakMq5Pu1555ZW29HXFF7/4xWNffvnl/s2bN6/s1q3bwj/84Q+3xhh
6EMfOmf58uVtqb/9+vXrmz399NPftey33367Ve/evVc7Hxjnqu23336l9X7qU5866Ve/+tWdH/7whz80e/bs7vvo
t9+LyLXlxz72sYfWrl274Z133qlq165dyT//+c8D7r333gN22GGHOdQ1as6cOfvy/Y4DBgy4AXncMWPGDGHsdfgW
...
...
...
vf/nakMq5Pu1555ZW29HXFF7/4xdfgvf/nakMq5Pu1sfgW29HXFF7/4xW">
</image>

我的最终项目将会是这样的：）

请参阅：https://rugger-demast.codio.io/front/_location_map-en-wikiatlas.html，您可以在此处下载SVG，但PNG目前只是一个链接，并不会被下载。

- Hugolpz

---

你是真的在问如何将图像转换为Base64，还是你已经有了Base64，这并不清楚？ - adeneo

我有PNG或JPG图像，例如此图。我是今天才发现的base64的新手。 - Hugolpz

那么你有一张图片，想要将其转换为Base64格式吗？ - adeneo

好的，在阅读了一些内容之后，似乎我首先需要获取base64。 - Hugolpz

似乎这个问题从XHR请求获取BLOB数据很有帮助。 - Hugolpz

有关编程的内容翻译成中文。仅返回翻译后的文本：下载请参见：https://dev59.com/TmQo5IYBdhLWcg3whPki - Alban

Answer 1

好的。解决方案在这个fiddle中，并如下所述。

0) 目标：我希望添加一些内容，例如：

<img src="data:[mime type;][charset=<charset>;][base64,][base64 data]"> // formula
<image src='data:image/png;base64,SGVsbG8s...IHdvcmxkIQ='></image>" // shortened example

1) 将PNG图像转换为Base 64格式。

PNG图像被存储为BLOB，也就是"作为单一实体存储的二进制数据集合"。因此需要一个BLOB到Base64的转换器：

var converterEngine = function (input) { // fn BLOB => Binary => Base64 ?
    var uInt8Array = new Uint8Array(input),
          i = uInt8Array.length;
    var biStr = []; //new Array(i);
    while (i--) { biStr[i] = String.fromCharCode(uInt8Array[i]);  }
    var base64 = window.btoa(biStr.join(''));
    return base64;
};

2) 加载文件并转换数据

var getImageBase64 = function (url, callback) {
    // to comment better
    var xhr = new XMLHttpRequest(url), img64;
    xhr.open('GET', url, true); // url is the url of a PNG/JPG image.
    xhr.responseType = 'arraybuffer';
    xhr.callback = callback;
    xhr.onload  = function(){
        img64 = converterEngine(this.response); // convert BLOB to base64
        this.callback(null,img64) // callback : err, data
    };
    xhr.onerror = function(){ callback('B64 ERROR', null); };
    xhr.send();
};

// make it looks like other D3js requests
d3.uri = function(url, callback) {
    return getImageBase64(url, callback);
  };

3) 运行整个程序：

我使用回调函数运行该方法，并附加一个带有base64 URI数据的图像元素。

d3.uri('http://fiddle.jshell.net/img/logo.png', function(data){ 
    $("#myImage").attr("src", "data:image/png;base64," + data);  // inject data:image in DOM
} )

来源：我从获取XHR请求中的BLOB数据和此处演示中获得了帮助。

服务器端

我可能最终会使用服务器端转换（参考这篇文章和这篇文章）。可能的方法包括：

echo -n `cat file.png` | base64 > output.txt
openssl base64 < path/to/file.png | tr -d '\n' > output.txt
cat path/to/file.png | openssl base64 | tr -d '\n' > output.txt
openssl base64 -in input.png -out output.txt

- Hugolpz

Answer 2

你可以使用XMLHttpRequest将文本从文件加载到JavaScript对象中，然后使用setAttribute将该值分配给图像元素的xlink:href属性。但是，这个问题的答案可能是你想要的。

SVG是否支持嵌入位图图像？

- Thomas Tregner

---

你的意思是有一个JS函数可以将.png文件加载为txt，然后我会得到base64代码吗？ - Hugolpz

我以为你已经将它转换成了Base64。这是你想在浏览器中做的事情吗？有一个叫做btoa的JavaScript函数可以实现。 - Thomas Tregner

哦...我好像在某个地方遇到过这只猫（强烈的记忆挖掘） - Hugolpz

我的首选是在浏览器获取图像之前将其转换并加载。但如果这不是您的计划，那么有这个问答描述如何使用JavaScript进行转换。它可能无法在所有地方都起作用。https://dev59.com/XGsz5IYBdhLWcg3wQFe2 - Thomas Tregner