Ist data:image/png;base64, die nur base64-Kodierung für das img-tag?

Arbeite in Java mit Bildern aus dem Internet kodiert als base64-strings. Ich habe nur gesehen, image/png im img-src-tags, d.h. data:image/png;base64,{eNc0d3d_St!ng...} ich habe nicht gesehen, image/gif oder image/jpg. Ich habe mir auf DAMIT und lese ein wenig auf der base-64-Codierung.

Desweiteren habe ich Streifen aus der data:image/png;base64 Teil in Java (Android), wenn dabei
Base64.decode(src, Base64.DEFAULT) so wie es aussieht gibt es keine Notwendigkeit für die png in dieser situation. In der Tat, wenn ich nicht abstreifen dieser "header" dann BitmapFactory.decodeByteArray null zurück.

Die Frage ist also, gibt es andere andere Formate als png für image encoding auf web?

  • Die meisten Bild - (oder andere binäre) Datei-Formate, wie PNG, GIF oder JPEG, enthält ein ("magic") Kennung am Anfang der Datei, die Sie eindeutig das format. In diesem Fall, die image/png Teil überflüssig ist, aber dies kann nicht der Fall für alle möglichen Formate, die dargestellt werden können, mithilfe der data-URI-Schema. So, es hat einen Zweck. Beachten Sie auch, dass die ;base64 Teil i optional, nicht blind senden Sie die Daten nach der Base64-decoder.
  • Danke für den Kommentar, das beantwortet einige meiner Fragen zum Thema. Und erzeugt ein paar neue auch. 🙂
InformationsquelleAutor Rick | 2015-09-25
  1. 3

    Ja, Sie sind:

    data:image/gif

    data:image/jpg

    etc...

    nicht nur für Bilder:

    data:text/html

    Ist das format der Folgen

    data:[<media type>][;charset=<character set>][;base64],<data>

    Se hier
    https://en.wikipedia.org/wiki/Data_URI_scheme

    und

    http://dataurl.net/#about

    InformationsquelleAutor Rolando Corratge Nieves
  2. 1

    Nein, Sie können gif, jpg oder jede Art von Bild, das der browser liest. E. g:

    HTML:

    <img width="16" height="16" alt="star" src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" />

    • Dies ist vielleicht am besten als eine separate Frage, aber: wenn ich image/png im code oben auf image/gif, bekomme ich das gleiche Bild. Ich erwartet, dass Sie sich vielleicht eine korrupte Bild, aber es scheint, dass zumindest FF rendering ist es die gleiche, unabhängig von der Art des Bildes erklärt
    • Recht, einmal im FF sieht, dass der Datenstrom ein Bild, sieht es bei der "magischen Zahl", um herauszufinden, welches Bild Typ es ist.
    InformationsquelleAutor Buzinas
  3. 0

    async/await-version

    const axios = require("axios");
const response = await axios.get("https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Los_Colorines_4.jpg/320px-Los_Colorines_4.jpg", {
  responseType: "arraybuffer"
});
const base64 = Buffer.from(response.data, 'base64').toString('base64');
const base64ImageUrl = `data:image/gif;base64,${base64}`

    Demo: https://runkit.com/nickjanssen/axiosbase64image

    InformationsquelleAutor Nick
Schreibe einen Kommentar