Lire beaucoup d'images BLOB en HTML

Lire beaucoup d'images BLOB en HTML - SQL/NoSQL - Programmation

Marsh Posté le 09-09-2019 à 15:24:51    

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 :)  
 
 

Reply

Marsh Posté le 09-09-2019 à 15:24:51   

Reply

Marsh Posté le 09-09-2019 à 15:34:02    

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
Reply

Marsh Posté le 09-09-2019 à 15:38:13    

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 ?

Reply

Marsh Posté le 09-09-2019 à 16:21:01    

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
Reply

Marsh Posté le 09-09-2019 à 16:51:59    

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

Reply

Marsh Posté le 09-09-2019 à 17:03:22    

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
Reply

Marsh Posté le 09-09-2019 à 19:00:55    

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

Reply

Marsh Posté le 10-09-2019 à 10:27:51    

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
Reply

Marsh Posté le 10-09-2019 à 13:41:22    

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

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed