JS:如何将 image.png 编码为 base64 代码以进行数据 URI 嵌入? [英] JS: how to encode an image.png into base64 code for data URI embedding?

问题描述

我有几个不同尺寸的 .png 位图，例如 ./img/dog.png 和 ./img/cat.png.如何通过 JS 加载我的图像的 base64 字符串? 我的预期数据是这样的(但要长得多):

I have several .png bitmaps of different dimensions, by example ./img/dog.png and ./img/cat.png. How to load the base64 string of my images via JS ? My expected data is omething like that (but far longer):

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

<小时>

注意:我希望取回这个字符串，它是我的文件，只是我的文件，没有剪辑，也没有更大.然后我会将它嵌入到 SVG <image> 元素中，例如:

---

Note: I wish to get back this string which is my file and just my file, not clipped, nor bigger. I will then embedded it into a SVG <image> element such:

<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>

我的最终项目看起来会是这样 :)

My end project looks will look like that :)

另请参阅:https://rugger-demast.codio.io/front/_location_map-en-wikiatlas.html ，您可以在其中下载 SVG，但 png 目前只是一个链接，不会被下载.

See also: https://rugger-demast.codio.io/front/_location_map-en-wikiatlas.html , where you can download the SVG, but the png is currently just a link and will not get downloaded.

推荐答案

好的.解决方法在this fiddle中，解释如下.

OK. The solution is in this fiddle and explained as follows.

0) 目标: 我希望附加这样的内容:

0) Objective: I wish to append something such :

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

1) 以 64 为基数的 PNG 图像.

PNG 存储为 BLOB，也就是存储为单个实体的二进制数据集合".所以我需要一个 BLOB 到 Base64 的转换器:

1) PNG images to base 64.

PNGs are stored as BLOB, aka "a collection of binary data stored as a single entity". So I need a BLOB to Base64 converter :

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 数据附加图像元素.

3) Run the whole:

I run the function with the callback to append an image element with the base64 URI data.

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

来源:我从 Getting BLOB data from XHR request 得到帮助，然后 在那里演示.

Sources: I got help from Getting BLOB data from XHR request, then demoed there.

我实际上可能最终会使用服务器端转换(来源 这个和这个).可能的方法是:

I may actually end up using server-side conversion (sources this and this). Possible ways are :

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

这篇关于JS:如何将 image.png 编码为 base64 代码以进行数据 URI 嵌入?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！