Laravel 5

Créer une image depuis une div de l'écran actif et l'envoyer par mail.

  • Avatar de CinquièmeDimension
    Membre depuis :
    18/04/2019
    Messages :
    37

    Bonjour à tous,

    Voilà le contexte :

    • laravel 5.7
    • une application web de gestion de primes liées à des abonnement de presse
    • les opérateur travailleront avec des cliens au téléphone, qui auront vu une offre dans un magazine ou autre pour abonnement avec un cadeau

    L'opérateur doit pouvoir envoyer un mail à un client pour lui faire confirmer une information (le plus souvent, ce sera la fiche d'une prime, pour qque le client vérifie si c'est bien le cadeau dont il parle).

    J'ai pensé faire comme ça :

    • Encodage de la partie à envoyer (div#sendable par exemple) en image. (Je pense qu'une image est le plus universel et peut être ouvert depuis n'importe quelle boite mail. Le Client pouvant être une personne agée et/ou peut ne pas arriver à lire les mails en HTML ou un fichier pdf par exemple)
    • recuperation de l'adresse mail via une modale
    • envoi en AJAX au controller
    • envoi du mail depuis le controller
    • affichage de la réponse AJAX dans une alert bootstrap

    Là où je coince c'est : comment convertir ma div en image ? Et après ça, est-ce que l'envoi d'une image par mail n'est pas trop difficile d'envoyer une image par mail via ce biais ?

    Si vous avez des pistes, je suis preneur .

    Merci à vous

  • Avatar de bestmomo
    Membre depuis :
    07/04/2013
    Messages :
    2565

    Salut,

    Pour la conversion d'une zone en image la librairie html2canvas semble adaptée. Il faut ensuite convertir cette image avec toDataURL. Comme ça tu peux l'envoyer en AJAX en même temps que l'adresse mail.

    Pour la partie Laravel il doit suffire d'ajouter l'image qui a été sauvegardée sur le serveur dans la vue du mail.

  • Avatar de CinquièmeDimension
    Membre depuis :
    18/04/2019
    Messages :
    37

    Merci de ton aide bestmomo

    Oui je suis effectivement parti de ce côté là...

    Là où je bloque c'est que, effectivement j'arrive jusqu'au mail ou je passe l'image en base64 pour l'intégrer à une balise img. Mais par soucis d'universalité (au cas où le html ne serais pas activé dans le client mail du destinataire, pour je ne sais quelle raison) j'aurai aimé passer l'image en piece jointe. Dans mon mailable j'ai mon return comme suis:

    return $this->from('admin@mail.fr')
    ->view('emails.partage_ecran')
    ->with([
    'email' => $this->data['email'],
    'image' => $this->data['image'],
    ])
    ->attachData($this->data['image'], 'ecran.png', [
    'mime' => 'image/png',
    ]);

    La doc de laravel montre le attachData() avec des données brutes d'un pdf mais j'ai supposé que c'est théoriquement possible pour un png. Seulement le fichier créé n'est pas lisible.

    Mon $this->data['image'] est ma capture encodée en base64. Quelqu'un aurait-il une idée de pourquoi le attachData n'arrive pas à créer mon png ?
    Il reste bien la solution de créer un fichier, le stocker sur le serveur, l'envoyer, et le supprimer mais j'aime autant me passer du stockage pour le créer directement dans l'envoi...

    ------> UP SOLUTION A CE PROBLEME
    dans mon mailable:

    public function __construct($data)
    {
    $data['imagefile'] = str_replace('data:image/png;base64,', '', $data['image']);
    $data['imagefile'] = str_replace(' ', '+', $data['imagefile']);
    $data['imagefile'] = base64_decode($data['imagefile']);

    $this->data = $data;
    }

    J'ai créé un $data['imagefile'] qui est utilisé en attachData et le $data['image'] pourra toujours être utilisé dans la vue du mail en <img src='{ { $image } }'> (j'ai mis un espace entre les deux { juste parce que sinon le $image ne s'affiche pas dans ce forum :D )

    Pour ceux que ça peut intéresser, je met le js utilisé en front:

    function convert2img(callback){
    html2canvas(document.querySelector("#page"),{
    allowTaint : true,
    useCORS : true
    }).then(function(canvas) {
    data = canvas.toDataURL();
    callback(data);
    });
    }

    function validateEmail(email) {
    var re = /^(([^<>()[]\.,;:\s@\"]+(.[^<>()[]\.,;:\s@\"]+)*)|(\".+\"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
    }

    function sendMail(image){

    let email = mail.value;
    let donnees = {
    "_token": "{{ csrf_token() }}",
    "email": email,
    "image": image
    }

    console.log(donnees);

    $.ajax({
    type: "POST",
    url: "{{ url('/') }}/test",//ATTENTION surtout pas de / à la fin de l'URL ou l'appel partira en GET !!
    data : donnees,
    success: function(text, statut) {
    $('.toast.invalidmail').toast('hide');
    $('.toast.success').toast('show');
    },
    error: function(e){
    console.log(e)
    }
    });
    }

    function btnEnvoyerParMail(){
    $('#mailModal').modal('hide');
    let mail = document.querySelector("#mailModal input[name='mail']").value;

    if (validateEmail(mail)) {
    $('.toast.invalidmail').toast('hide');
    convert2img(sendMail);
    }else{
    $('.toast.invalidmail').toast('show');
    }
    };

Vous ne pouvez pas répondre à ce sujet.