[Angular] Codifica img src in blob/base64

[fermat]

ciao!

in sostanza in angular devo creare un vcf, ma ho problemi con l'immagine.
prendendo un vcf di esempio:

BEGIN:VCARD
VERSION:3.0
.....
PHOTO;TYPE=JPEG;ENCODING=b:/9j/4AAQSkZJRgABAQEBLAEsAAD//gATQ3JlYXRlZCB3aXRoIEdJTVD/4gKwSUNDX1BST0ZJTEUAAQEAAAKgbGNtcwQwAABtbnRyUkdCIFhZWiAH5wAFABcADgAnACdhY3NwTVNGVAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA9tYAAQAAAADTLWxjbXMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA1kZXNjAAABIAAAAEBjcHJ0AAABYAAAADZ3dHB0AAABmAAAABRjaGFkAAABrAAAACxyWFlaAAAB2AAAABRiWFlaAAAB7AAAABRnWFlaAAACAAAAABRyVFJDAAACFAAAACBnVFJDAAACFAAAACBiVFJDAAACFAAAACBjaHJtAAACNAAAACRkbW5kAAACWAAAA........
.......

vi ho messo solo la parte problematica.
io ho l'immagine sulla pagina, e devo codificarla (penso sia base64).

le ho provate tutte, ma o ottengo errori, o ottengo solo una stringa non valida.
questo il codice con l'ultimo tentativo:

  creaVcf(): void {
    const imgProfile = (<HTMLImageElement>document.getElementById("img_profile"));
    const blobImg = atob(imgProfile.src);


    const makeVCardVersion = `VERSION:3.0`;
    const makeVCardInfo = `N:${this.nome};${this.cognome}`;
    const makeVCardName = `FN:${this.nomeCognome}`;
    const makeVCardOrg = `ORG:${this.azienda}`;
    const makeVCardTitle = `TITLE:${this.ruolo}`;
    const makeVCardPhoto = `PHOTO;TYPE=JPEG;ENCODING=b:${blobImg}`;
    const makeVCardTel = `TEL;TYPE=WORK,VOICE:${this.telefono}`;
    const makeVCardAdr = `ADR;TYPE=WORK,PREF:;;${this.indirizzo}, ${this.cap} ${this.citta}`;
    const makeVCardEmail = `EMAIL:${this.email}`;
    const makeVCardTimeStamp = `REV:${new Date().toISOString()}`;


    let vcard = `BEGIN:VCARD
${makeVCardVersion}
${makeVCardInfo}
${makeVCardName}
${makeVCardOrg}
${makeVCardTitle}
${makeVCardPhoto}
${makeVCardTel}
${makeVCardAdr}
${makeVCardEmail}
${makeVCardTimeStamp}
END:VCARD`;


    const file = new Blob([vcard], {type: 'text/vcard'});
    const a = document.createElement('a');
    a.href = URL.createObjectURL(file);
    a.download = this.nomeCognome + '.vcf';
    a.click();
    URL.revokeObjectURL(a.href);
  }

qualche idea??

[alka]

io ho l'immagine sulla pagina, e devo codificarla (penso sia base64).

Devi codificarla, o decodificarla?
Nell'attributo src dell'immagine hai i dati, o hai un percorso?

Quello che sembra tu stia facendo è prendere il percorso dell'immagine, convertirlo in blob (quindi in dati binari) e tentare di inserire quei dati binari della card, dove in realtà si aspetta un base-64.

Sembra tutto un po' a caso...

[fermat]

Devi codificarla, o decodificarla?
Nell'attributo src dell'immagine hai i dati, o hai un percorso?

Quello che sembra tu stia facendo è prendere il percorso dell'immagine, convertirlo in blob (quindi in dati binari) e tentare di inserire quei dati binari della card, dove in realtà si aspetta un base-64.

Sembra tutto un po' a caso...

ciao!

sicuramente l'ultimo tentativo è a caso, dopo una giornata spesa senza riuscire, non ne potevo più

sulla pagina visualizzo l'immagine da un url.
quindi dovrei codificare quell'immagine, presa da url, e metterla nel vcf.

[alka]

sicuramente l'ultimo tentativo è a caso, dopo una giornata spesa senza riuscire, non ne potevo più

Nella programmazione purtroppo questa tattica non funziona mai.

sulla pagina visualizzo l'immagine da un url.
quindi dovrei codificare quell'immagine, presa da url, e metterla nel vcf.

In tal caso, devi trovare il modo di disegnare quell'immagine - ad esempio, in un canvas - e ottenere il contenuto della stessa come "data url", ossia come indirizzo che contiene direttamente i dati dell'immagine codificati in base-64, per utilizzare poi quella stringa codificata all'interno della card VCF.

Facendo una ricerca rapida, ho trovato questo esempio che può fare al caso tuo. Lo riporto qui per completezza:

function getBase64Image(img) {
  var canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);
  var dataURL = canvas.toDataURL("image/png");
  return dataURL.replace(/^data:image\/?[A-z]*;base64,/);
}

var base64 = getBase64Image(document.getElementById("imageid"));

[fermat]

grazie mi hai salvato!

creaVcf(): void {
    const imgProfile = (<HTMLImageElement>document.getElementById("img_profile"));


    const canvas = document.createElement("canvas");
    canvas.width = imgProfile.width;
    canvas.height = imgProfile.height;
    const ctx = canvas.getContext("2d");
    ctx.drawImage(imgProfile, 0, 0);
    const dataURL = canvas.toDataURL("image/jpeg");
    const blobImg = dataURL.replace(/^data:image\/?[A-z]*;base64,/, '');


    const makeVCardVersion = `VERSION:3.0`;
    const makeVCardInfo = `N:${this.nome};${this.cognome}`;
    const makeVCardName = `FN:${this.nomeCognome}`;
    const makeVCardOrg = `ORG:${this.azienda}`;
    const makeVCardTitle = `TITLE:${this.ruolo}`;
    const makeVCardPhoto = `PHOTO;TYPE=JPEG;ENCODING=b:${blobImg}`;
    const makeVCardTel = `TEL;TYPE=WORK,VOICE:${this.telefono}`;
    const makeVCardAdr = `ADR;TYPE=WORK,PREF:;;${this.indirizzo}, ${this.cap} ${this.citta}`;
    const makeVCardEmail = `EMAIL:${this.email}`;
    const makeVCardTimeStamp = `REV:${new Date().toISOString()}`;


    let vcard = `BEGIN:VCARD
${makeVCardVersion}
${makeVCardInfo}
${makeVCardName}
${makeVCardOrg}
${makeVCardTitle}
${makeVCardPhoto}
${makeVCardTel}
${makeVCardAdr}
${makeVCardEmail}
${makeVCardTimeStamp}
END:VCARD`;


    const file = new Blob([vcard], {type: 'text/vcard'});
    const a = document.createElement('a');
    a.href = URL.createObjectURL(file);
    a.download = this.nomeCognome + '.vcf';
    a.click();
    URL.revokeObjectURL(a.href);
  }

l'unica modifica che ho fatto è nel replace:

const blobImg = dataURL.replace(/^data:image\/?[A-z]*;base64,/, '');

e poi nell'immagine sulla pagina il crossorigin:

<img id="img_profile" src="{{img}}" alt="{{nomeCognome}}" style="width:100%;height: 100%;" crossorigin="anonymous">

grazie mille!!