Discussion :

[Sid05]

Bonjour,

J'ai déjà créé deux, trois site internet en Php mais pas plus. Je m'aventure maintenant un peu plus loin.

J'aimerais créer une appli ou une fonctionnalité pour que l'internaute puisse encoder lui-même des informations qu'il veut voir apparaître sur une image.
Exemple : http://www.dromadaire.com/dromacarte...eeecac00057db3 (dans ce cas-ci, c'est une vidéo)

Est-ce que en me dirigeant vers du Javascript, je suis bon? Est-ce que quelqu'un connaît un tuto qui pourrait m'aider ?

Merci et bonne fin de jounée

[SpaceFrog]

Qu' entends tu par "encoder du texte sur une image"

Afficher du texte au dessus d'une image sur la page web (sans modifier le fichier image) ?
Modifier le fichier image lui même pour incruster du texte ( de façon définitive ) ?

[Sid05]

Oui, incruster le texte de manière définitive.

Il complète leur nom, prénom, date etc... (comme dans l'exemple), il s'affiche dans l'image à des endroits que j'aurais défini et après il télécharge l'image.

[Lakhdr]

Juste pour te donner une idée:

HTML:

Code :

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

1
2
3
4
5
6
7
 
 
<a href="#" id="telechargerImage" onclick="telecharger()"  >Telecharger l'image avec ce text!</a> 
 
<input type="text" id="montext" onchange="redessiner()"/><br/>
 
<canvas id="monCanvas"></canvas>

JS

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
33
34
35
 
 
function redessiner(){
      var moncanvas =document.getElementById("monCanvas");
      var monText=document.getElementById("montext").value;
     dessiner(monText, "https://snap-photos.s3.amazonaws.com/img-thumbs/960w/80AGW3RWVH.jpg");
}
 
 function telecharger(){
     var moncanvas =document.getElementById("monCanvas");
     var monLien=document.getElementById("telechargerImage");
     monLien.download = "monImage.jpg";
     monLien.href = moncanvas .toDataURL("image/png").replace(/^data:image\/[^;]/, 'data:application/octet-stream');
}
 
function dessiner(texte, imageSrc){
      var moncanvas = document.getElementById("monCanvas");
               moncanvas.width="800";
               moncanvas.height="300";
     var moncontext = moncanvas .getContext("2d");
     var monImage = new Image();
          monImage .onload = function(){
          moncontext .drawImage(monImage, 5, 5);
          moncontext .font = "40pt Calibri";
          moncontext .fillText(texte, 40, 90);
     };
    monImage.crossOrigin="Anonymous";
    monImage.src = imageSrc; 
}
 
 
window.addEventListener('load', function(){
dessiner("ICI le text", "https://snap-photos.s3.amazonaws.com/img-thumbs/960w/80AGW3RWVH.jpg")
 
});

Voila

[SylvainPV]

Ingénieux la solution à base de canvas. Mais j'ai quand même l'impression que ce traitement d'image est plus un boulot à faire côté serveur.

[Sid05]

Merci,

C'est ce que je cherchais, merci ;-)

Est-ce que l'on peut mettre toutes les polices que l'on veut ou il vaut mieux rester sur les basiques helvetica / arial ... ?

Y-a-t-il moyen de mettre le texte en forme d'arc ou autre ?

[progdebutant]

Ingénieux la solution à base de canvas. Mais j'ai quand même l'impression que ce traitement d'image est plus un boulot à faire côté serveur.

Je suis d'accord aussi, en PHP ça doit être faisable, on travaille mieux les images qu'avec le javascript il me semble.
C'est vrai que fallait y penser à cette astuce canvas