IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Encoder du texte sur une image


Sujet :

JavaScript

  1. #1
    Futur Membre du Club
    Femme Profil pro
    commercante
    Inscrit en
    Septembre 2014
    Messages
    19
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 35
    Localisation : Belgique

    Informations professionnelles :
    Activité : commercante
    Secteur : Alimentation

    Informations forums :
    Inscription : Septembre 2014
    Messages : 19
    Points : 7
    Points
    7
    Par défaut Encoder du texte sur une image
    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

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 634
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 634
    Points : 66 650
    Points
    66 650
    Billets dans le blog
    1
    Par défaut
    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 ) ?
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  3. #3
    Futur Membre du Club
    Femme Profil pro
    commercante
    Inscrit en
    Septembre 2014
    Messages
    19
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 35
    Localisation : Belgique

    Informations professionnelles :
    Activité : commercante
    Secteur : Alimentation

    Informations forums :
    Inscription : Septembre 2014
    Messages : 19
    Points : 7
    Points
    7
    Par défaut
    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.

  4. #4
    Membre actif

    Homme Profil pro
    Étudiant
    Inscrit en
    Février 2013
    Messages
    119
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Algérie

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Électronique et micro-électronique

    Informations forums :
    Inscription : Février 2013
    Messages : 119
    Points : 203
    Points
    203
    Billets dans le blog
    1
    Par défaut
    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

  5. #5
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Points : 9 944
    Points
    9 944
    Par défaut
    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.
    One Web to rule them all

  6. #6
    Futur Membre du Club
    Femme Profil pro
    commercante
    Inscrit en
    Septembre 2014
    Messages
    19
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 35
    Localisation : Belgique

    Informations professionnelles :
    Activité : commercante
    Secteur : Alimentation

    Informations forums :
    Inscription : Septembre 2014
    Messages : 19
    Points : 7
    Points
    7
    Par défaut
    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 ?

  7. #7
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 109
    Points
    44 109
    Par défaut
    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.

  8. #8
    Membre habitué
    Homme Profil pro
    rien
    Inscrit en
    Décembre 2015
    Messages
    282
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Aveyron (Midi Pyrénées)

    Informations professionnelles :
    Activité : rien

    Informations forums :
    Inscription : Décembre 2015
    Messages : 282
    Points : 144
    Points
    144
    Par défaut
    Citation Envoyé par SylvainPV Voir le message
    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

  9. #9
    Futur Membre du Club
    Femme Profil pro
    commercante
    Inscrit en
    Septembre 2014
    Messages
    19
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 35
    Localisation : Belgique

    Informations professionnelles :
    Activité : commercante
    Secteur : Alimentation

    Informations forums :
    Inscription : Septembre 2014
    Messages : 19
    Points : 7
    Points
    7
    Par défaut
    Et des idées pour le faire en PHP alors si c'est peut-être mieux ? :-)
    Et pourquoi ?

  10. #10
    Membre expérimenté
    Homme Profil pro
    chomeur
    Inscrit en
    Avril 2015
    Messages
    709
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 79
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : chomeur
    Secteur : Distribution

    Informations forums :
    Inscription : Avril 2015
    Messages : 709
    Points : 1 582
    Points
    1 582
    Par défaut
    dire qu'on le fait mieux avec php c'est complètement faux c'est plutôt le contraire.
    Plus vite encore plus vite toujours plus vite.

  11. #11
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Points : 9 944
    Points
    9 944
    Par défaut
    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
    One Web to rule them all

  12. #12
    Membre éclairé Avatar de micetf
    Homme Profil pro
    Professeur des Ecoles
    Inscrit en
    Mai 2009
    Messages
    557
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ardèche (Rhône Alpes)

    Informations professionnelles :
    Activité : Professeur des Ecoles
    Secteur : Enseignement

    Informations forums :
    Inscription : Mai 2009
    Messages : 557
    Points : 831
    Points
    831
    Par défaut
    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.

  13. #13
    Membre expérimenté
    Homme Profil pro
    chomeur
    Inscrit en
    Avril 2015
    Messages
    709
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 79
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : chomeur
    Secteur : Distribution

    Informations forums :
    Inscription : Avril 2015
    Messages : 709
    Points : 1 582
    Points
    1 582
    Par défaut
    - 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 ?
    Plus vite encore plus vite toujours plus vite.

  14. #14
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Points : 9 944
    Points
    9 944
    Par défaut
    Citation Envoyé par melka one Voir le message
    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 ?
    One Web to rule them all

Discussions similaires

  1. [HTML] HTML: Superposer du texte sur une image
    Par claralavraie dans le forum Balisage (X)HTML et validation W3C
    Réponses: 7
    Dernier message: 09/02/2006, 14h44
  2. [HTML][DREAMWEAVER] Texte sur une image
    Par Nicos77 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 4
    Dernier message: 12/10/2005, 10h43
  3. Centrer un texte sur une image créée dynamiquement
    Par rigolman dans le forum Langage
    Réponses: 7
    Dernier message: 11/10/2005, 18h22
  4. Positionnement de texte sur une image
    Par inddzen dans le forum Windows
    Réponses: 2
    Dernier message: 08/08/2005, 13h22
  5. [HTML]Peut-on écrire un texte sur une image ?
    Par flogreg dans le forum Balisage (X)HTML et validation W3C
    Réponses: 4
    Dernier message: 28/02/2005, 18h24

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo