Sujet Précédent Sujet Suivant

Envoyer une photo (récuperée dynamiquement) par mail

Résolu/Fermé
Nesil Messages postés 37 Date d'inscription mardi 21 juin 2022 Statut Membre Dernière intervention 1 juillet 2024 - 12 juil. 2022 à 16:10
Nesil Messages postés 37 Date d'inscription mardi 21 juin 2022 Statut Membre Dernière intervention 1 juillet 2024 - 13 juil. 2022 à 15:00

Bonjour,

Je travail actuellement sur une application qui liste des priorités. Ces priorités se composent d'un champs texte et eventuellement d'une pièce jointe aux formats jpeg, jpg ou png.

Lorsqu'une priorité est séléctionné, il est possible d'envoyer par mail le contenu du champs texte de la priorité. Etant celui qui a implementé l'jout de piece jointe aux priorités, j'aimerais aussi pouvoir l'ajouter au contenu du mail.

J'ai donc essayé d'ajouter la recuperation de la photo ajouté dynamiquement dans le corps du mail  dans ma fonction js pour pouvoir l'envoyer.

ci-joint la fonction js :

 function sendMail() {
   
    var mailTo = $("#listeMail").val();

    const date = new Date();
    const formattedDate = date.toLocaleString("fr", {
        day: "numeric",
        month: "short",
        year: "numeric",
    });
    var semaineprio = $('#semainePrio').text();
    var titreconf = $("#GroupeOption option:selected" ).text();
    $(".imgButtonCheck").remove();

    console.log(333333, $(this));
    var contenu = "";//"<!DOCTYPE html><html><body>";
    contenu += '<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" style="display:table">';
    contenu += '<tdoby><tr><td height="3" colspan="2" style="font-size:0.5px; line-height:0.5px; background-color:#ffcc33">&nbsp;</td></tr><tr><td style="background-color:#efefef; margin-left:5px"><h1 align="left" style="font-size:1.3em"><span style="color:#000000">Point Fabrication / </span>'+titreconf+'</h1></td><td style="background-color:#efefef; margin-left:5px"><h1 align="right" style="color:#000000; font-size:1.5em; margin-right:5px">'+formattedDate+'</h1></td></tr></tdoby>';
    contenu += "</table>";

    //prio du jour
    contenu += '<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" style="display:table">';
    contenu += '<tbody><tr><td height="3" style="font-size:0.5px; line-height:0.5px; background-color:black">&nbsp;</td></tr> <tr class="x_titreMail"><td><h1 align="center" style="color:black; font-size:1.2em; background-color:#efefef">Wins du jour</h1></td></tr>';
    $('#priorite').find('.prioDivSynthese').each(function() {
        prio = '<tr style="background-color:#ffffff"><td>';
        prio += '<h1 align="left" style="color:black; font-size:1.2em; margin-left:5px">'+$(this).find(".labelPrio").text()+"</h1>";
        prio += "<label>"+$(this).find(".textDiv").text()+"</label>";

        //Ajout image
        prio += "</br><img width='500' height='500' id='imgAide' src=""+ $(this).find(".imgAide").attr('src','data:image/jpeg;base64,' + document.getElementById('imgAide').src) +"'>";

        prio += '</td></tr><tr><td height="1" style="font-size:0.5px; line-height:0.5px; background-color:black">&nbsp;</td></tr>';
        contenu += prio;
    });
    contenu += "</tbody>";
    contenu += "</table>";

    

    nb=1;
    nbtotal = $('#synthese').find('.ongletPrioSynth').length;

    
    contenu += "</tr></tbody>";
    contenu += "</table>";
    var mailA = "***.***@***.com;";
    $.each(datapriosynth, function (index, element) {
        if(element.mail != null){
            mailA = mailA+element.mail +";";
        }
    });
    console.log(contenu);
    mailA = mailA.slice(0, -1)
    var data = [];
    data[1] = mailTo;
    data[2] = mailA;
    
    data[5] = semaineprio;
   
    data[6] = contenu;

    $.ajax({
        cache:false,
        url: "data/sendMail",
        type: "POST",
        async: false,
        data: ({
            entryData: data,
        }),
        success:function(response, status) {
            if(response == "erreur"){
                erreur("Une erreur c'est produite !");
            }else{
                reussite("Mail envoyé avec succès !");
            }
            $("#listeMail option:disabled").prop("selected", true);
            // $(".errorMail").remove();
            $(".modalMail").hide();
            // $(".modalMailRep").show();
            $('#listeMail').html('');
            $('#listeMail').html('<option disabled selected>Mail</option>');
        },
        error: function(response, status) {
        }
    });
    // $(".mailContainer").hide();
    
}

Et voici la fonction PHP liée à ma fonction .js :

function sendMail()
    {
        

        $response = "erreur";

        if (isset($_POST["entryData"])) {

            $entryData = $_POST["entryData"];

           
            $contenu = $entryData[6];
            $to = $entryData[1];
            $to2 = $entryData[2];
            $to2 = explode(";",$to2);

            try {
                $mail = new PHPMailer(true);
                $mail->SMTPDebug = 0;
                $mail->CharSet = 'UTF-8';
                $mail->setFrom("***@***.com");
                if (strlen($entryData[1]) > 1) {
                    $mail->addAddress($to);
                }
                foreach($to2 as $mailtoa){
                    $mail->addAddress($mailtoa);
                }
                
                $mail->isHTML(true);
                $mail->Subject = "Synthèse point fabrication de " . $entryData[5] . ".";
                $mail->Body = $contenu;
                $mail->send();

            } catch (Exception $e) {
                echo $mail->ErrorInfo;
            }
        }
    }

Lorsque j'envoie le mail, voila ce qui s'affiche en console :

et voici le corps du mail que je recois :

Je pense que mon erreur vient de cette ligne :

prio += "</br><img width='500' height='500' id='imgAide' src=""+ $(this).find(".imgAide").attr('src','data:image/jpeg;base64,' + document.getElementById('imgAide').src) +"'>";

Mais je ne sais par quoi modifier le ".imgAide" ou si il y a autre chose à rajouter.

Merci d'avance du temps que vous allez m'accordez.
Windows / Chrome 103.0.0.0

A voir également:

4 réponses

Réponse 1 / 4
jordane45 Messages postés 38398 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 30 janvier 2025 4 732
12 juil. 2022 à 22:23

Bonjour,

Tu ne peux pas directement utiliser le contenu du src de ta balise image ....  il faut convertir ton image en blob pour pouvoir ensuite l'utiliser tel que tu le fais en base64

https://www.google.com/search?q=javascript+get+image+blob
0
Nesil Messages postés 37 Date d'inscription mardi 21 juin 2022 Statut Membre Dernière intervention 1 juillet 2024
13 juil. 2022 à 09:49

J'ai deja convertit mon image en blob dans mon Handler.php pour une autre fonction

Handler.php :

function sauvegarderPrioOngletFenetre()
    {

        $response[0] = "erreur1";
        $response[1] = "erreur2";
        if (isset($_POST['id_prio']) && isset($_POST['texte'])) {
            
            $response[0] = "erreur3";
            $response[1] = "erreur4";

            $id_prio = $_POST['id_prio'];
            $id_onglet = $_POST['id_onglet'];
            $texte = $_POST['texte'];
            $position = $_POST['position'];
            $dateid = $_POST['dateid'];
            $image_aide = "";
            $modifimg = "false";
            // ajout de l'image au formulaire

            if(isset($_FILES['photoAideDetail'])){
                //var de l'image
                $img = $_FILES['photoAideDetail']['name'];
                $tmp = $_FILES['photoAideDetail']['tmp_name'];

                
                // Définition de la largeur et de la hauteur maximale
                $width_max = 500;
                $height_max = 500;

                // Content type
                if (exif_imagetype($tmp) == IMAGETYPE_JPEG) {
                    header('Content-Type: image/jpeg');
                } else if (exif_imagetype($tmp) == IMAGETYPE_PNG) {
                    header('Content-Type: image/png');
                } 
                else if (exif_imagetype($tmp) == IMAGETYPE_JPG) {
                    header('Content-Type: image/jpg');
                }
                
                // Cacul des nouvelles dimensions
                list($width_orig, $height_orig) = getimagesize($tmp);

                $ratio_orig = $width_orig/$height_orig;

                if ($width_max/$height_max > $ratio_orig) {
                    $width_max = $height_max*$ratio_orig;
                } else {
                    $height_max = $width_max/$ratio_orig;
                }

                // Redimensionnement
                if (exif_imagetype($tmp) == IMAGETYPE_JPEG) {
                    $image = imagecreatefromjpeg($tmp);
                } else if (exif_imagetype($tmp) == IMAGETYPE_PNG) {
                    $image = imagecreatefrompng($tmp);
                } else if (exif_imagetype($tmp) == IMAGETYPE_JPG) {
                    $image = imagecreatefromjpg($tmp);
                }
                
                $img = imagescale($image, 225);
                imagejpeg($img, "../ImagesPrio/" . $img, 80);
                
                $image_aide = file_get_contents("../ImagesPrio/" . $img);
                $modifimg = "true";
            }
  
            $dbcontroller = new DBController();

// La suite de mon code correspond à l'enregistrement en base de donnée

Et j'arrive à afficher l'image sur mon navigateur en la récuperant depuis ma bdd et en le reconvertissant de 2 manières :

une en php :

function generationPriorite()
    {
       $image = $prio['image_aide'];
       if($image != NULL){
                        $img = '<img id="imgAide" 
                        src="".base64_encode($image).'" data-img="true"> 
                        </br>';
                        
       }
   $priorite .= '</br><div id="imgContainer" class="flexColumn"><div id="imgAide" 
   class="flexColumn">' . $img . '</div></br><label for="photoAideDetail">Modifier la pièce jointe : 
   </label><input type="file" id="photoAideDetail" name="photoAideDetail" accept="image/png, 
   image/jpeg, image/jpg"></div></div>';
}

et une en js:

img = '</br><img id="imgAide" src="" + btoa(image) +'">';

// j'ai épuré le code pour garder seulement les lignes qui nous interressent

priorite += '<div class="labelInputPrioSynthese textDiv textPrioOgSynthese" id="labelFPrioV1">'+texte+'</br><div class="imageP">'+img+'</div></div></div>';

Que dois-je modifier pour recuperer mon image dans ma fonction send_mail?

0
jordane45 Messages postés 38398 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 30 janvier 2025 4 732 > Nesil Messages postés 37 Date d'inscription mardi 21 juin 2022 Statut Membre Dernière intervention 1 juillet 2024
13 juil. 2022 à 09:57

est-ce que tu as ete voir le lien que je t'ai donné ?

0
Réponse 2 / 4
Nesil Messages postés 37 Date d'inscription mardi 21 juin 2022 Statut Membre Dernière intervention 1 juillet 2024
13 juil. 2022 à 10:02

Avec tes remarques j'ai donc procédé à ces changements :

dans ma fonction js :

function sendMail() {
    
    var image = document.getElementById('imgAide');
    var img = btoa(image);
    
    prio += "</br><img width='500' height='500' id='imgAide' src=""+ img +"'>";
}

et voila ce que j'obtient en console :

Pourtant mon mail reste comme cela :

J'imagine qu'il me manque une étape ...
0
Réponse 3 / 4
jordane45 Messages postés 38398 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 30 janvier 2025 4 732
13 juil. 2022 à 10:10

Il faut convertir l'image (le fichier ! ) en blob et pas ... la balise img

Voici des exemples

https://stackoverflow.com/questions/33855167/convert-data-file-to-blob/33855825#33855825

https://codepen.io/tpai/pen/QVxPOJ

Et tu pourras ainsi utiliser le résultat pour le mettre dans la balise SRC de la balise img dans ton mail.
0
Réponse 4 / 4
Nesil Messages postés 37 Date d'inscription mardi 21 juin 2022 Statut Membre Dernière intervention 1 juillet 2024
13 juil. 2022 à 15:00

Merci beaucoup.

Au final dans mes recherches, j'ai voulu tester qqc et j'ai trouvé une solution à mon problème. J'ai juste regardé les propriétés de mon image afin de rerpoduire la ligne juste au dessus qui arrive à ajouter le texte au corps de mon mail.

Voila donc la solution qui a marché avec moi :

prio += "<label>"+$(this).find(".textDiv").text()+"</br></label>";
        //Ajout image
prio += $(this).find(".imageP")[0].innerHTML + "</br>";

Et voici le resultat :

Merci du temps que vous m'avez accordé
0