JS: Wie codiere ich eine image.png in Base64-Code für die Daten-URI-Einbettung?

Ich habe mehrere PNG-Bitmaps mit unterschiedlichen Dimensionen, zum Beispiel./img/dog.png und./img/cat.png. Wie lade ich diebase64 Zeichenfolge meiner Bilder über JS? Meine erwarteten Daten sind ungefähr so (aber viel länger):

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

Hinweis: Ich möchte diese Zeichenfolge, die meine Datei und nur meine Datei ist, weder abgeschnitten noch größer, zurückbekommen. Ich werde es dann in eine SVG einbetten<image> Element wie:

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

Mein Endprojekt sieht dann so aus :)

Siehe auch:https://rugger-demast.codio.io/front/_location_map-en-wikiatlas.html , wo Sie die SVG herunterladen können, aber die PNG ist derzeit nur ein Link und wird nicht heruntergeladen.

Antworten auf die Frage(2)

Ihre Antwort auf die Frage