Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1157 connectés 

  FORUM HardWare.fr
  Programmation
  SQL/NoSQL

  Lire beaucoup d'images BLOB en HTML

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Lire beaucoup d'images BLOB en HTML

n°2338884
odylano
Posté le 09-09-2019 à 15:24:51  profilanswer
 

Bonjour,
 
Je développe un site web qui contient ma liste de films, jeux vidéo, ... Pour les jaquettes des films, je les enregistre dans une DB Mysql en format BLOB.
Le problème c'est que lorsque je lance ma page avec toute la liste des films, cela prend beaucoup de temps à charger ... Je pense que c'est à cause des images.  
Pour récupérer les images de la DB, je les convertis de BLOB en base64 pour les lire en JS.  
 
Donc je me demandai si c'était la bonne méthode pour lire beaucoup de fichiers image en DB ou si le mieux est de stocker les img dans un dossier ? Peut-être que ça ira plus vite ?
Comment font les sites hébergeur de vidéos avec beaucoup d'image ?
 
Merci d'avance pour votre aide :)  
 
 

mood
Publicité
Posté le 09-09-2019 à 15:24:51  profilanswer
 

n°2338887
mechkurt
Posté le 09-09-2019 à 15:34:02  profilanswer
 

C'est clairement pas une bonne idée, surtout si tu affiches plusieurs jaquette par page.
Le boulot d'un serveur web à la base c'est de servir des fichiers, et la plupart du temps, Apache (ou Nginx) font ça très bien.
La pour chaque image mentionné dans ton code html, le navigateur vas faire une requête au serveur qui, n'ayant pas d'image à afficher vas appeler un script qui vas charger un blob depuis la base de donnée, et y ajouter un entête et renvoyer (enfin) une image.
En terme de perf, c'est complétement nul, les rares fois ou on vas utiliser ce genre de technique, c'est pour des problèmes de sécurisation des données  ou de statistiques (et encore il existe d'autres moyen de le faire).


---------------
D3
n°2338888
odylano
Posté le 09-09-2019 à 15:38:13  profilanswer
 

Merci de ta réponse. Oui j'ai pu le constater que c'était nul mais je ne sais pas quelle méthode utiliser pour éviter ça ... Stocker les images dans un dossier img où le code html ira directement chercher toutes les jaquettes ?

n°2338891
mechkurt
Posté le 09-09-2019 à 16:21:01  profilanswer
 

Pacque là, à l'heure actuelle ton fichier html contient le code de toutes tes images ?!
Du coup pas de cache possible et la page html de 10 mo ?
Tu utilises quoi comme technologie server pour récupérer ton contenu html et générer ton html : php, asp, autre ?
Sinon, pourquoi tu n'utilises pas un truc tout fait plutôt que ré-inventer la roue (tu as peut être envie d'apprendre, c'est louable ^^) ?
Il existe surement des CMS libre que tu pourrais héberger, voir même des solutions en ligne...


---------------
D3
n°2338893
odylano
Posté le 09-09-2019 à 16:51:59  profilanswer
 

J'utilise AngularJS pour ma page web qui récupère la liste des films avec les images via une requête AJAX. Côté Serveur, j'utilise du PHP.  
Oui c'est pour apprendre à réaliser un site Web.  
Tu as des exemples de CMS qui pourraient me servir ? Ainsi je regarderais comment ils font

n°2338894
mechkurt
Posté le 09-09-2019 à 17:03:22  profilanswer
 

Nan mais si c'est pour apprendre, tu vas galérer à renter dans le code d'un CMS bien foutu...
Pour le moment regarde à enregistrer tes images dans un dossier puis à les ré-afficher, vu que ce seront de vrai fichiers avec une adresse physique, elle pourront être mise en cache et tu gagneras en performance.
Tu pourrais donner un extrait de ce que te renvoie ton ajax (pour un film par exemple), je n'ai toujours pas compris a quoi ressemblait la partie dédié à la jaquette (url distante ou contenu du ficher en base64) ?


---------------
D3
n°2338903
odylano
Posté le 09-09-2019 à 19:00:55  profilanswer
 

Voici le code pour charger la jaquette d'un film :
 
Fct côté client pour demander une image au serveur en AngularJS:
 

Code :
  1. function load_movie(id)
  2. {
  3. return Movie_Service.Load_movie(id).then(function(resp){
  5.  var pic_64 = resp.data.pic.data;
  6.  var header = resp.data.pic.header;
  8.  var blob = b64_to_blob(pic_64, header);
  10.  var img = new File([blob], 'img.jpg' , { type: header });
  11. }); 
  12. }
  14. function b64_to_blob(b64Data, contentType, sliceSize) {
  16.    contentType = contentType || '';
  17.    sliceSize = sliceSize || 512;
  19.    var byteCharacters = atob(b64Data);
  20.    var byteArrays = [];
  22.    for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
  23.       var slice = byteCharacters.slice(offset, offset + sliceSize);
  25.       var byteNumbers = new Array(slice.length);
  26.       for (var i = 0; i < slice.length; i++) {
  27.          byteNumbers[i] = slice.charCodeAt(i);
  28.       }
  30.       var byteArray = new Uint8Array(byteNumbers);
  32.       byteArrays.push(byteArray);
  33.    }
  35.    var blob = new Blob(byteArrays, {type: contentType});
  36.    return blob;
  37. }
  39. my_app.factory("Movie_Service", function($http, Upload)
  40. {
  41. movie.Load_movie = function(id){
  42.   
  43.  var data =
  44.  {
  45.   "commande": "load_movie",
  46.   "id": id
  47.  }; 
  49.  return $http({
  50.   
  51.   method: 'POST',
  52.   url: "controller/ajax/movie_ajax.php",
  53.   data: $.param(data),
  54.   headers: {'Content-Type': 'application/x-www-form-urlencoded'}
  56.  });
  57. }
  58.  
  59.     return movie;
  60. });


 
Fct côté serveur en PHP:

Code :
  1. function load_movie()
  2. {
  3. $response = array();
  5. $id = $_POST['id'];
  7. // Fichier image dans la BDD
  9.  $req = $bdd_con->prepare('SELECT id_picture, ext, header, data FROM picture WHERE id_movie = :id AND id_type_picture=2');
  11.                 // Ex de donnée dans la table picture
  12.                 // id_picture= "99"
  13.                 // ext= "jpg"
  14.                 // header= "image/jpeg"  
  15.                 // data= [BLOB - 81.6ko]
  16.                 // id_type_picture = "2" pour indiquer que c'est une jaquette
  18.  $req->bindValue("id", $id, PDO::PARAM_STR);
  20.  $req->execute();
  22.  $img = $req->fetchall(PDO::FETCH_ASSOC);
  24. // ------
  26. // Envoie de données Blob impossible avec le header : application/x-www-form-urlencoded
  27. // => Solution : l'encoder en base64
  28. $pic_b64 = base64_encode($img);
  30. $response['status'] = "success";
  31. $response['pic'] = $pic_b64;
  33.     print_r(json_encode($response));
  34. }


 
Je viens de remarquer avec tout ça qu'il y a bcp de conversion là :o  
Tu connais un bon CMS quand même ? j'aimerais aussi tester cette solution

n°2338918
mechkurt
Posté le 10-09-2019 à 10:27:51  profilanswer
 

Tu devrais faire une moulinette en php qui pour toutes les images de ta base de donnée crée un fichier (avec pourquoi pas l'id comme identifiant unique) via ce genre de technique :

Code :
  1. GD:
  3. $image = imagecreatefromstring($blob);
  5. ob_start(); //You could also just output the $image via header() and bypass this buffer capture.
  6. imagejpeg($image, null, 80);
  7. $data = ob_get_contents();
  8. ob_end_clean();
  9. echo '<img src="data:image/jpg;base64,' .  base64_encode($data)  . '" />';
  11. ImageMagick (iMagick):
  13. $image = new Imagick();
  14. $image->readimageblob($blob);
  15. echo '<img src="data:image/png;base64,' .  base64_encode($image->getimageblob())  . '" />';


source : https://askcodez.com/php-convertir- [...] image.html
(GD et Imagick sont des bibliothèques pour travailler les images sur PHP, je crois que GD est quasiment tout le temps installé mais que Imagick est un peu mieux...
 
Une fois que tu auras tes fichiers dans ton dossier, ton Ajax pourra ne renvoyer que l'id_picture et ton code JS en déduira l'url de l'image à afficher (/image/jaquette/img_{ID_PICTURE}.jpg).
 
Pour les CMS, je bosses plutôt avec des appli portail, blog ou ecommerce, donc je ne saurais trop te conseiller, tu auras autant de chance que moi avec Google...
https://www.google.com/search?q=mov [...] +php+mysql
J'ai vu que y'avais aussi https://www.filmotech.fr/ qui permet d'exporter ce qu'on rentres via le logiciel en php/mysql.
Sinon y'a le mastodonte Wordpress qui aura surement des plugin pour gérer une médiathèque (ya des plugin pour tout sur Wordpress, faut juste vérifier  qu'il sont à jour ^^).
https://fr.wordpress.org/plugins/tags/movie-database/
 
Bon courage !


---------------
D3
n°2338922
odylano
Posté le 10-09-2019 à 13:41:22  profilanswer
 

Merci beaucoup pour tes réponses, ça va m'aider pour mon site !
Encore un grand merci


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  SQL/NoSQL

  Lire beaucoup d'images BLOB en HTML

 

Sujets relatifs
[Web] Protéger l'accès à des imagesHTML : <video> sans devoir charger toute la video avant lecture
Coder des images pour Livre Bds EPUBHTML / Deux repères dans une carte
[LibreOffice][Tableur] Macro pour actualiser des liens externes htmlOutil de recherche personnalisé HTML
Nettoyage HTML avec regex negative lookaheadLire une vidéo depuis un serveur sur un site Web
Couleur fond bloc html siteAfficher le contenu d'un fichier log dans une page HTML
Plus de sujets relatifs à : Lire beaucoup d'images BLOB en HTML

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.079 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR