Partage
  • Partager sur Facebook
  • Partager sur Twitter

Enregistrer des images en local

    2 novembre 2017 à 15:24:57

    Bonjour,

    je souhaiterais faire une application en JavaScript qui permet d'upload une image en local pour s'en servir par la suite.

    Alors pour ce genre de situation je sais que l'on va me dire qu'il faut que j'utilise php, tout ça, mais je tiens à faire cette application en JavaScript (jQuery).

    En fait je souhaite que n'importe qui puisse l'utiliser sans avoir à installer wamp ou l'héberger sur un serveur afin de le faire tourner.

    Pour la "base de données" qui répertoriera le chemin des images + libellé, j'ai décidé de mettre ça dans un fichier JSON.

    • Partager sur Facebook
    • Partager sur Twitter
      2 novembre 2017 à 16:12:24

      Salut,

      Tu peux pas enregistrer localement une image en tant que fichier.

      Par contre tu peux récupérer les données de l'input file, les convertir en base64 et les stoker dans l'objet localStorage.

      Attention, la quantité de données dans localstorage est limité, faut pas que les images soient trop grosses.

      Tu peux passer par un canvas pour les redimensionner afin de controler leur taille.

      // input est un input[type=file]
      
      var file = input.files[0]; // tu peux aussi faire
      // une boucle sur input.files si tu
      // veux gérer l'envoi multiple
      var fr = new FileReader();
      fr.onload = function () {
        fr.result; // données base64 de ton image
        // c'est un chaine de caractères que tu peux
        // stocké dans localStorage
        // tu peux ensuite placer cette chaine dans 
        // l'attribut src d'une image 
      }
      fr.readAsDataURL(file);


      Remarque : le format base64 augmente le poids de l'image de 33%.

      -
      Edité par LCaba 2 novembre 2017 à 16:26:37

      • Partager sur Facebook
      • Partager sur Twitter
      Anonyme
        2 novembre 2017 à 16:13:22

        Salut,

        Je crois que tu ne différencie pas du tout back-end et front-end.

        Pourrais-tu expliquer un peu mieux ce que tu recherches à faire ?

        • Partager sur Facebook
        • Partager sur Twitter
          2 novembre 2017 à 16:30:09

          Je crois qu'il cherche à développer une appli sous forme d'un fichier HTML que tu installes sur ton PC et qui fonctionne sans serveur.

          Mais du coup impossible de modifier un fichier JSON. 

          Si t'as pas de serveur, tu peux compter que sur localStorage, sessionStorage et indexedDB 

          -
          Edité par LCaba 2 novembre 2017 à 16:33:18

          • Partager sur Facebook
          • Partager sur Twitter
            3 novembre 2017 à 14:52:01

            Oui c'est bien ça que je veux faire LCaba. Bon bah j'aurai quand même essayé.

            C'est juste que j'ai eu vent que le futur dans le monde du développement serait de remplacer les bases de données SQL par des fichiers JSON. Mais je pensais que l'on pouvait manipuler les fichiers JSON de manière locale.

            Bon bah du coup ce n'est pas grave tant pis, je devrais soit mettre l'application en ligne soit le développer en langage logiciel ^^

            Pour ce qui est du localStorage, j'vais avoir beaucoup trop d'images à enregistrer donc ça risque de poser problème je pense

            -
            Edité par raïzenn 3 novembre 2017 à 14:53:49

            • Partager sur Facebook
            • Partager sur Twitter
              3 novembre 2017 à 15:21:08

              Houla non c'est pas exactement ca.

              Depuis quelques temps on voit arriver des base de données NoSQL (ca ne va pas remplser le modèle relationnelle mais ca répond à d'autres besoins). Certaines bases NoSQL comme MonngoDb stockent les données dans un format json mais comme pour une base SQL il faut l'installer sur la machine.

              Tu peux développer une appli desktop avec du langage web en utilisant electron et nodeJS. Et a ce moment là tu n'utilises plus "réellement" le navigateur et tu peux sortir du bac à sable pour accéder aux fichiers clients.

              • Partager sur Facebook
              • Partager sur Twitter
              Un petit +1 si je vous ai aidé est toujours appréciable :).

              Enregistrer des images en local

              × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
              × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
              • Editeur
              • Markdown