Discussion :

[Tankian]

Bonjour,

J'ai créé une page qui html qui permet via l'utilisation de canvas (KineticJS) d'insérer du texte sur une image pui d'ouvrir outlook dans le but d'y insérer cette image.
Le Hic c'est que outlook n'accepte pas les Data-URI (si j'ai bien compris c'est parcequ'il utilise le moteur de word pour afficher le HTML) or je n'arrive pas à trouver de solution pour transformer le Data-URI en image.

Avez vous une idée ou une solution ?

Merci de votre aide.

Ci-joint le code que j'utilise à présent mais qui coince car outlook ne reconnait pas l'image.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
function OpenOutlookDoc(){
	try{
		var myDataUrl;  //place outside of scope of function for saving
		stage.toDataURL({
			callback: function(dataUrl){
				// do something with the data url
				// like window.open(dataUrl); 
				// you can do anything do anything really, like
				myDataUrl = dataUrl;
				var img= new Image(); //or document.createElement('img');
				img.src= myDataUrl; 
				//(new Image()).src = "myDataUrl"; //or the shortcut way
				document.getElementById('container').appendChild(img);
			},
			mimeType: 'image/png',
			quality: 1
		});
		var outlookApp = new ActiveXObject("Outlook.Application");
		var nameSpace = outlookApp.getNameSpace("MAPI");
		mailFolder = nameSpace.getDefaultFolder(6);
		mailItem = mailFolder.Items.add('IPM.Note.FormA');
		mailItem.Subject="Voeux 2015";
		mailItem.To = "";
		//alert(myDataUrl);
		mailItem.HTMLBody = "<img src=\"" + myDataUrl + "\" alt=\"voeux\" height=\"496\" width=\"949\"/>"+ img +"";
		alert(mailItem.HTMLBody);
		mailItem.display (0); 
	}
	catch(e){
		alert(e);
	}
}

[lysandro]

Bonsoir,

Utiliser Outlook 2003 ? (c'est juste pour dire une co...bétise)

Je te donne l'idée pour ce qu'elle vaut ... Si je comprends bien, tu dois récupèrer une data-uri, un truc du genre "data:image/png;base64,<données encodées en base64>"
Tu peux récupérer la partie encodée en base64, l'écrire dans un fichier avec un Scripting.FileSystemObject, puis lancer un programme qui décodera l'image en binaire avec un object WScript.Shell par exemple. Mais bon pas sur que ça marche surtout dans une page web ! une appli hta ok. Va y avoir des questions de droits sur l'exécution de ces contrôles activex. Envisageable uniquement sur une appli locale à mon avis.

Si les data-uri ne fonctionnent pas dans outlook, il va bien falloir écrire ton fichier image quelque part, et ça dans une page web ... Euh ... si peut-être en passant par un serveur web pour la conversion et qui te renvoie une url ? Euh qu'on se comprenne bien, tu envois au serveur ta data-uri, il la crache dans un fichier et te renvoie l'url du fichier.

[Tankian]

Bonjour Lysandro,

Je travaille pour une association et comme dans beaucoup de structure, nous utilisons outlook en guise de messagerie... Cet outil sera utilisé par notre président (82 ans) donc j'aimerai autant que faire se peut lui faciliter la vie en évitant les manip. Jusqu'ici tout marche bien sauf le moyen de convertir mon image. Tu l'a sbien compris c'est une appli locale utilisée sur des postes équipés d'IE donc l'active x pas de souci. Je vais regarder tes deux solutions :
cripting.FileSystemObject ou si un server web peut me faire la conversion.

Merci

[lysandro]

Si c'est vraiment une appli locale alors passer à une .hta devrait faciliter les choses, ces applications étant "trusted" (il semble toutefois que dans Windows 8 les .hta ne soient plus une priorité (cf la remarque de MS ici en fin)). Le problème de la conversion en local, ce n'est pas la conversion elle même. Si c'est encodé en base64 ce n'est pas difficile à décoder, c'est l'écriture dans un fichier qui pose problème. Le controle FileSystemObject ne fournissait pas de méthodes pour écrire des fichiers binaires, seulement des fichiers textes.

Une autre option, peut-être, est de passer par le clipboard (en anglais c'est plus facile pour les recherches ) apparement IE autorise un window.clipboardData.setData(...). Si j'essayais ça, j'essaierais de passer par une img en bmp plutot que png, ms oblige ... Après il faut aller fouiller pour voir comment la coller dans le mail :/ pas simple ... peut-être, en mettant un script dans ton body qui ferait le coller (???) si le mail est ouvert en édition ...

Si tu trouves une solution, poste là si tu veux bien, je suis curieux

[Tankian]

Bonjour,

J'ai trouvé une solution, par contre c'est crado je préviens...
De plus cette solution ne marche PAS sous outlook 2013, je viens de le découvrir. (j'explique plus bas pourquoi)

Alors, pour le clipboard, bonne idée, mais passer une image dans le presse papier est assez compliqué. De plus, je ne sais pas si j'aurai pû la coller dans le corps du mail.

J'ai donc à la base un canvas dans lequel les utilisateurs ont saisi du texte.
Via une fonction php je génère une image sauvegardée sur mon server avec une requête ajax.
Ensuite depuis mon contrôle active-x je peux donner l'url à Outlook où est stocké mon image que je viens de créer.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
var canvasData = layer.toDataURL("image/png");
var ajax = new XMLHttpRequest();
ajax.open("POST",'ecardBuilder.php?filename=<?php echo $_SESSION['last_card']; ?>',false);
ajax.setRequestHeader('Content-Type', 'application/upload');
ajax.send(canvasData);					
 
var outlookApp = new ActiveXObject("Outlook.Application");
var nameSpace = outlookApp.getNameSpace("MAPI");
mailFolder = nameSpace.getDefaultFolder(6);
mailItem = mailFolder.Items.add('IPM.Note.FormA');
mailItem.Subject="Voeux 2015";
mailItem.To = "";
mailItem.HTMLBody = "<img src=\"http://192.168.1.29/eCards/img/voeux_<?php echo $_SESSION['last_card'] ; ?>.png\" alt=\"voeux\" height=\"496\" width=\"949\"/>";

Tout ça semblait fonctionner à la perfection car Outlook 2010 encodait l'image en BLOB au moment de l'envoi du mail, sauf que depuis Outlook 2013 le comportement est différent il donne un lien vers l'image... Dans mon cas l'iamge est hebergé sur notre intranet...

Code généré par Outlook 2010

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<body lang=3D"FR" link=3D"blue" vlink=3D"purple">
   <div class=3D"WordSection1">
     <p class=3D"MsoNormal">
        <span style=3D"font-size:10.0pt;mso-fareast-language=:FR">
          <img width=3D"949" height=3D"496" id=3D"_x0000_i1025" src=3D"cid:image=001.png@01D01DCA.7D8DAAE0" alt=3D"voeux">
        </span>
        <span style=3D"font-size:10=.0pt;mso-fareast-language:FR">
           <o:p></o:p>
        </span>
      </p>
</div>

Code généré par Oulook 2013

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<body lang=3D"FR" link=3D"#0563C1" vlink=3D"#954F72">
     <div class=3D"WordSection1">
        <p class=3D"MsoNormal">
            <span style=3D"font-size:10.0pt;mso-fareast-language=:FR">
                <img width=3D"949" height=3D"496" id=3D"_x0000_i1025" src=3D"http://19=2.168.1.29/eCards/img/voeux_20141222044515.png" alt=3D"voeux">        
            </span>
           <span =style=3D"font-size:10.0pt;mso-fareast-language:FR">
             <o:p></o:p>
           </span>
         </p>
</div>

[lysandro]

Merci d'avoir posté ta solution.

Tiens j'ai trouvé ça how to embed image in html body in c# into outlook mail la réponse peut t'intéresser.