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

Bibliothèques & Frameworks Discussion :

importer des images [TinyMCE]


Sujet :

Bibliothèques & Frameworks

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre Expert
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 493
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 61
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 493
    Billets dans le blog
    1
    Par défaut importer des images
    Bonjour,
    je crée une interface permettant à l'utilisateur de saisir des actualités. Je m'intéresse à TinyMCE pour lui fournir un éditeur style Word, lui permettant de saisir du texte et d'insérer des images. C'est cette partie qui me pose problème. Actuellement, j'ai un script qui permet de saisir du texte et importer des images prises sur le disque dur.
    Code html : 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
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    <!DOCTYPE html>
    <html>
     
    <head>
     
        <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/6.7.0/tinymce.min.js"></script>
     
        <script>
            tinymce.init({
                selector: 'textarea#file-picker',
                statusbar: false,
                language_url: "fr_FR/langs/fr_FR.js",   // ici le chemin d'accès au fichier de traduction
                language : "fr_FR",
                plugins: 'image code',
                toolbar: 'undo redo | link image | code',
                /* enable title field in the Image dialog*/
                image_title: true,
                /* enable automatic uploads of images represented by blob or data URIs*/
                automatic_uploads: true,
                /*
                URL of our upload handler (for more details check: https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_url)
                images_upload_url: 'postAcceptor.php',
                here we add custom filepicker only to Image dialog
                */
                file_picker_types: 'image',
                /* and here's our custom image picker*/
                file_picker_callback: function (cb, value, meta) {
                    var input = document.createElement('input');
                    input.setAttribute('type', 'file');
                    input.setAttribute('accept', 'image/*');
     
                    /*
                    Note: In modern browsers input[type="file"] is functional without
                    even adding it to the DOM, but that might not be the case in some older
                    or quirky browsers like IE, so you might want to add it to the DOM
                    just in case, and visually hide it. And do not forget do remove it
                    once you do not need it anymore.
                    */
     
                    input.onchange = function () {
                        var file = this.files[0];
     
                        var reader = new FileReader();
                        reader.onload = function () {
                            /*
                            Note: Now we need to register the blob in TinyMCEs image blob
                            registry. In the next release this part hopefully won't be
                            necessary, as we are looking to handle it internally.
                            */
                            var id = 'blobid' + (new Date()).getTime();
                            var blobCache =  tinymce.activeEditor.editorUpload.blobCache;
                            var base64 = reader.result.split(',')[1];
                            var blobInfo = blobCache.create(id, file, base64);
                            blobCache.add(blobInfo);
     
                            /* call the callback and populate the Title field with the file name */
                            cb(blobInfo.blobUri(), { title: file.name });
                        };
                        reader.readAsDataURL(file);
                    };
     
                    input.click();
                },
                content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
            });
        </script>
    </head>
     
    <body>
    <form action="traitement.php" method="post">
     
        <textarea name="CeQueVousVoulez" id="file-picker"></textarea>
     
     
        <input type="submit" value="envoyer">
    </form>
    </body>
    </html>
    L'idée serait de déposer les images dans un répertoire sur le serveur et d'en stocker l'URL en bdd.

    Pour voir ce que je récupère actuellement, j'ai mis ce code dans traitement.php (l'action du formulaire) :
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    <?php
    var_dump($_POST);
    et je m'aperçois que l'image importée est présente "en dur" :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    array(1) {
      ["CeQueVousVoulez"]=>
      string(196139) "<p>blabla</p>
    <p>&nbsp;</p>
    <p><img title="stop-frelon.png" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAa4AAAF7CAYAAACKBm8GAAAAxHpUWHRSYXcgcHJvZmlsZSB0eXBlIGV4aWYAAHjabVBbEsMgCPznFD2CPFQ8jmnsTG/Q4xcDmYltyLi7glkRGJ/3Cx4zCAUkVy2tlGQhTRp1E5o8+oGY5EBPjVC45qFuIcmYjdkLWpzxzMcPJ2M3lS9G+ozCthaaOJP+GJETz46m3sOohRGTFzAMuj8rlab1+oRtpDXUF0wQXdv.../+gxxtVFQ1oAVYBHUA1EGxtbQ20traGKioqAn6/3zQMwxBCSKWUU83h4ODg8AFHCKEA27IsK5FIpOfn55M9PT0zhw8fnpubm5sn64t7ATgCHAeGbug8N3GN0jRNTSnlymQyxVLKFo/Hs8Tr9TZ6PJ4KXdfzhBB+wK2U0pyP1MHBweFDIV5pIGrb9nw6nZ6OxWKXI5FIdzqdPgtc1DRtHkin02kbuCFj2/8fmtGaTQ7QlPIAAAAASUVORK5CYII=" alt="" width="430" height="379"></p>"
    }
    Comment puis-je faire SVP ?

  2. #2
    Membre Expert
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 493
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 61
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 493
    Billets dans le blog
    1
    Par défaut
    Vu l'abondance des réponses, je modifie ma demande.
    Étant persuadé de ne pas être le seul à importer des images avec TinyMCE, pouvez vous décrire votre façon de faire ?

    Ca pourrait me servir de 2 façons :
    1- La méthode me séduit et je l'adopte ;
    2- Elle me donne des idées pour faire fonctionner ma méthode.

  3. #3
    Membre Expert
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 493
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 61
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 493
    Billets dans le blog
    1
    Par défaut
    J'ai un peu avancé (à l'aide du regard d'un expert) car je sais maintenant que l'image importée est au format base64. C'est donc TinyMCE qui fait cette conversion. Donc comment modifier le code de tinymce.init (donné au post#1) pour renvoyer non pas le fichier converti, mais le fichier lui-même ?

  4. #4
    Modérateur

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

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 211
    Par défaut
    Bonjour,
    ... car je sais maintenant que l'image importée est au format base64.
    c'est vrai pour les images de provenance locale mais pas pour les distantes.

    C'est même écrit dans la documentation
    Citation Envoyé par https://www.tiny.cloud/docs/tinymce/6/upload-images/
    Local images are uploaded to TinyMCE using the editor.uploadImages() function. This functionality makes it possible for users to save their content before all images have completed uploading. If this occurs and no server path to the remote image is available, the images are saved as Base64.


    Donc comment modifier le code de tinymce.init (donné au post#1) pour renvoyer non pas le fichier converti, mais le fichier lui-même ?
    tu ne va pas avoir d'autre moyen que d'envoyer en base64 et traiter cela côté serveur.


    Étant persuadé de ne pas être le seul à importer des images avec TinyMCE, pouvez vous décrire votre façon de faire ?
    il y a au moins deux méthodes « simples », une en passant par une preg_match_all pour récupérer les src des images, enregistrer les données dans un fichier à identifiant unique après passage dans base64_decode et remplacer la src de l'image par l'url du fichier sauvegardé.

    Une autre approche consiste à passer par un new DOMDocument(), charger le html envoyer par tinyMCE, récupérer les éléments images, récupérer la src et ... pareil que ci-dessus.

  5. #5
    Membre Expert
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 493
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 61
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 493
    Billets dans le blog
    1
    Par défaut
    Citation Envoyé par NoSmoking Voir le message
    il y a au moins deux méthodes « simples », une en passant par une preg_match_all pour récupérer les src des images, enregistrer les données dans un fichier à identifiant unique après passage dans base64_decode et remplacer la src de l'image par l'url du fichier sauvegardé.
    Les guillemets autour de simples sont pas en trop
    Peux-tu me détailler un peu cette méthode ? J'ai compris le principe mais je vois pas son application. Comment, par exemple, récupérer le code de l'image dans le format base64 avec preg_match_all ?

  6. #6
    Modérateur

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

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 211
    Par défaut
    Peux-tu me détailler un peu cette méthode ?
    tout d'abord tu reçois un texte pour les images qui ressemble à :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <img src="data:image/png;base64,iVBORw0KGgoAAAAN...=" ...>
    ... c'est la partie "data:image/png;base64,iVBORw0KGgoAAAAN...=" qu'il faut remplacer par quelque chose comme "chemin-images/nom-image.png".

    Il faut donc récupérer toutes les images contenu dans le texte reçu avec preg_match_all.
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    $pattern = "/\< *[img][^\>]*[src] *= *[\"\']{0,1}([^\"\'\ >]*)/i";
    $prefixImage = "data:image/";
    $html = $_POST['texte'];
     
    preg_match_all($pattern, $html, $matches, PREG_SET_ORDER);
    Ensuite pour chaque récupération, contenu dans $matches, il faut « isoler » la partie "data:image/png;base64,iVBORw0KGgoAAAAN...=".
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    foreach ($matches as $match) {
      $img = $match[0];  // contient la chaine complète, <img src="....>
      $src = $match[1];  // contient le contenu de src
    Il faut maintenat traiter ce qu'il y a dans $src pour récupérer "data:image/png, le type d'image, d'un côté et "iVBORw0KGgoAAAAN...=", les données sous forme base64, de l'autre.
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    $base64 = explode(";base64,", $src);
    $base64[0];    // contient "data:image/png"
    $base64[1];    // contient "iVBORw0KGgoAAAAN...="
    ... à ce niveau il me semble souhaitable de faire des tests pour vérifier que l'on est bien en présence d'une image non vide et même récupérer l’extension pour le fichier.
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    // il serait bon de tester l'extension, attention à svg+xml
    $ext = str_replace("data:image/", ".", $base64[0]);
    Pour finir on décode ce qu'il y a dans $base64[1], on écrit les données dans un fichier à identification unique et il suffit de remplacer le contenu de l'attribut src initial par le nom du fichier.
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    $decoded = base64_decode($base64[1], true);
    $nomFile = $imageDirectory . uniqid("image-") . $ext;
    $size = file_put_contents($nomFile, $decoded);
    if($size){
      $html = str_replace($src, $nomFile, $html);
    }
    else {
      echo "Une erreur c'est produite";
    }
    voilà en gros la démarche, cela serait la même avec un new DOMDocument().

    Le résumé complet :
    Code php : 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
    <?php
    if (!isset($_POST['texte']) || empty ($_POST['texte'])) {
      echo "Aucune donnée disponible";
      exit;
    }
    $imageDirectory = "tinymce/images/";
    $pattern = "/\< *[img][^\>]*[src] *= *[\"\']{0,1}([^\"\'\ >]*)/i";
    $prefixImage = "data:image/";
    $html = $_POST['texte'];
     
    preg_match_all($pattern, $html, $matches, PREG_SET_ORDER);
     
    foreach ($matches as $match) {
      //$img = $match[0];  // contient la chaine complète, <img src="....>
      $src = $match[1];  // contient le contenu de src
      $base64 = explode(";base64,", $src);
      // fichier image uniquement
      $accept = strpos($base64[0], $prefixImage) !== false;
      if ($accept && count($base64) > 1) {
        $ext = str_replace($prefixImage, ".", $base64[0]);
        // il serait bon de tester l'extension, attention à svg+xml
        $decoded = base64_decode($base64[1], true);
        $nomFile = $imageDirectory . uniqid("image-") . $ext;
        $size = file_put_contents($nomFile, $decoded);
        if($size){
          $html = str_replace($src, $nomFile, $html);
        }
        else {
          echo "Une erreur c'est produite";
        }
      }
    }
    echo $html;  // pour mise à jour éventuelle côté client
    Je pense avoir fait le tour.

    Nota :
    il aurait peut-être mieux valu poser ta question sur le forum PHP, mon PHP étant largement rouillé, n'hésite pas à le faire valider .
    Ceci est une approche et il va sans dire qu'il faut un peu plus de verrou car il y a pas mal d’écueils en vu.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. importé des images dans jFrame netbeans
    Par princetunis dans le forum Agents de placement/Fenêtres
    Réponses: 1
    Dernier message: 18/04/2010, 23h34
  2. importer des image qui sont dans excel dans une table SQL2005
    Par johanaquatique dans le forum MS SQL Server
    Réponses: 3
    Dernier message: 31/08/2009, 18h13
  3. Importer des images en Flex et les convertir en symboles
    Par Natural Born Camper dans le forum Flex
    Réponses: 0
    Dernier message: 22/05/2008, 21h51
  4. [Access/C#] Comment en importer des images pour affichage ?
    Par don_hakim dans le forum Accès aux données
    Réponses: 1
    Dernier message: 26/08/2006, 09h24
  5. Comment supprimer le message d'importation des images
    Par yoda1000 dans le forum Access
    Réponses: 1
    Dernier message: 05/05/2006, 18h29

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