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 ?

[NoSmoking]

Bonjour,

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

"là c'est vous qui voyez !"... et ce en fonction des goûts et des couleurs.

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

Non sauf à créer ta propre fonction de "curvitude", sinon regarde du coté du SVG avec l’attribut textPath.

[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

[Sid05]

Et des idées pour le faire en PHP alors si c'est peut-être mieux ? :-)
Et pourquoi ?

[melka one]

dire qu'on le fait mieux avec php c'est complètement faux c'est plutôt le contraire.

[SylvainPV]

Il y a ImageMagick qui est très populaire, et utilisable en PHP : http://php.net/manual/fr/imagickdraw.annotation.php

Les avantages que je vois à faire ça côté serveur:
- ne dépend pas du navigateur client, donc pas de problème de compatibilité
- résultat homogène entre les utilisateurs (là encore pour éviter les variations selon le navigateur et le système)
- moins de code à faire télécharger au client
- plus de bibliothèques existantes éprouvées, avec plus de fonctionnalités intégrées

[micetf]

Il me semble que l'avantage de l'élément canvas est de permettre un rendu immédiat dans le navigateur.
Pour ma part, j'use (abuse) de cette API de dessin sur mon site perso.
Je ne fais appel au PHP que pour downloader l'image résultante canvas.toDataURL('png') que je lui envoie planquée dans un input de type hidden.

[melka one]

- ne dépend pas du navigateur client, donc pas de problème de compatibilité
- résultat homogène entre les utilisateurs (là encore pour éviter les variations selon le navigateur et le système)

pas persuadé le support de canvas par les navigateurs est homogène et un navigateur ne depent pas du systeme sur lequel il fonctionne.

- moins de code à faire télécharger au client

a l'inverse il faut envoyé des donné au serveur voir en recuperé sans compté la charge serveur (bande passante, consommation électrique) a moins de vouloir protégé son code a tout prix autant le faire en utilisant le pc client ?

[SylvainPV]

un navigateur ne depent pas du systeme sur lequel il fonctionne.

Oh, tu serais surpris !

http://stackoverflow.com/questions/2...vas-in-windows

Quand les navigateurs font appel à des API bas niveau comme pour du dessin, on a parfois de drôles de choses...

D'habitude dès que c'est possible de faire quelque-chose côté client, je vote pour, mais dans le cas présent je sais pertinemment que canvas est un choix beaucoup plus limité et fastidieux comparé à toutes les solutions clé-en-main qui existent côté serveur. Pensez à toutes les contraintes: comment je gère les IE <9 ? qu'est-ce qui se passe si la police n'est pas installée sur le système du client ? comment je fais pour avoir un texte ombré afin qu'il soit plus lisible ?