Share via


Incluir imagenes en HTML sin usar ficheros externos, Conversor de ficheros a base64

Hace tiempo que me enteré de como usar las data urls dentro de HTML, cosa que me parece muy conveniente para usar el formato HTML fuera de HTTP (por ej, para adjuntarlo en un correo)

    1: div.pass {
    2:   width:40px;
    3:   height:40px;
    4:   background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA..
    5:   background-repeat:no-repeat
    6: }

asi que para probarlo con imagenes, lo primero es convertir imagenes a base 64, con .Net se puede hacer asi:

    1: var f = "input.png";
    2: byte[] buff = null;
    3: using (FileStream fs = new FileStream(f, FileMode.Open, FileAccess.Read))
    4: {
    5:     using (BinaryReader br = new BinaryReader(fs))
    6:     {
    7:         long numBytes = new FileInfo(f).Length;
    8:         buff = br.ReadBytes((int)numBytes);            
    9:     }
   10: }
   11:             
   12: string res = Convert.ToBase64String(buff);
   13: var fout =  File.CreateText(@".\output.png.b64.txt");
   14: fout.Write(res);
   15: fout.Close();