Visualizzazione dei risultati da 1 a 5 su 5
  1. #1

    [Angular] Codifica img src in blob/base64

    ciao!

    in sostanza in angular devo creare un vcf, ma ho problemi con l'immagine.
    prendendo un vcf di esempio:
    codice:
    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:
    codice:
      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??

  2. #2
    Moderatore di Programmazione L'avatar di alka
    Registrato dal
    Oct 2001
    residenza
    Reggio Emilia
    Messaggi
    24,281
    Quote Originariamente inviata da fermat Visualizza il messaggio
    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...
    MARCO BREVEGLIERI
    Software and Web Developer, Teacher and Consultant

    Home | Blog | Delphi Podcast | Twitch | Altro...

  3. #3
    Quote Originariamente inviata da alka Visualizza il messaggio
    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.

  4. #4
    Moderatore di Programmazione L'avatar di alka
    Registrato dal
    Oct 2001
    residenza
    Reggio Emilia
    Messaggi
    24,281
    Quote Originariamente inviata da fermat Visualizza il messaggio
    sicuramente l'ultimo tentativo è a caso, dopo una giornata spesa senza riuscire, non ne potevo più
    Nella programmazione purtroppo questa tattica non funziona mai.

    Quote Originariamente inviata da fermat Visualizza il messaggio
    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:
    codice:
    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"));
    MARCO BREVEGLIERI
    Software and Web Developer, Teacher and Consultant

    Home | Blog | Delphi Podcast | Twitch | Altro...

  5. #5
    grazie mi hai salvato!

    codice:
    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:
    codice:
    const blobImg = dataURL.replace(/^data:image\/?[A-z]*;base64,/, '');
    e poi nell'immagine sulla pagina il crossorigin:
    codice:
    <img id="img_profile" src="{{img}}" alt="{{nomeCognome}}" style="width:100%;height: 100%;" crossorigin="anonymous">
    grazie mille!!

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.