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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Découper une image en morceaux pour éviter la copie trop facile

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Découper une image en morceaux pour éviter la copie trop facile

n°2411880
froussel
Posté le 10-03-2022 à 12:37:58  profilanswer
 

Bonjour,
 
Pour éviter que mon image de webcam soit réutilisée par des sites commerciaux je voudrais compliquer suffisamment le travail aux webmasters peu scrupuleux. Mon image est produite par un raspberry pi et le site est sur un serveur, j'envoie une image toutes les demi-heures.
 
L'idée (sauf si vous avez mieux et plus facile : découper l'image en morceaux et la page web affiche
J'ai trouvé  

Code :
  1. <HTML>
  2.   <BODY>
  3.   <style>
  4.     div.ligne {
  5.     margin-top: -5px; /* à ajuster */
  6.     text-align: center;
  7. }
  8. </style>
  9.     <div class="ligne">
  10.       <IMG SRC="images/index1_a.png"><IMG SRC="images/index2_a.png"><IMG SRC="images/index3_a.png">
  11.     </div>
  12.      <div class="ligne">
  13.       <IMG SRC="images/index4_a.png"><IMG SRC="images/index5_a.png"><IMG SRC="images/index6_a.png">
  14.    
  15.  
  16.   </BODY>
  17. </HTML>


 
L'ennui c'est que si la largeur de fenêtre est inférieure à la somme des largeurs d'images tout est décalé.
 
Doit bien y avoir une solution pour que dans ce cas des ascenseurs apparaissent obligeant ainsi à simuler une seule image visible
 
Merci d'avance
 
fr

mood
Publicité
Posté le 10-03-2022 à 12:37:58  profilanswer
 

n°2411893
TotalRecal​l
Posté le 10-03-2022 à 14:12:54  profilanswer
 

C'est du html à l'ancienne ça.  
Mais tout en restant simple, en forçant déjà une largeur minimale fixe sur la div qui contient les photos ("min-width" en css) ça ne résout pas le problème ?


---------------
Réalisation amplis classe D / T      Topic .Net - C# @ Prog
n°2411895
mechkurt
Posté le 10-03-2022 à 14:13:10  profilanswer
 

En mettant tes img en float:left;width:50%; et tes div.ligne en clear:left ça devrait fonctionner...


---------------
D3
n°2411929
froussel
Posté le 10-03-2022 à 19:17:58  profilanswer
 

Merci,  
Vous êtes trop spécialisés pour moi je ne suis pas capable d'exploiter vos réponses.
J'ai trouvé de quoi compléter et qui semble convenir :

Code :
  1. <HTML>
  2.   <BODY>
  3.  
  4.   <style type="text/css">
  5. body {
  6. width: 1200px;   /* à ajuster */
  7. margin-right: auto;
  8. margin-left: auto;
  9. background-color: #cccccc;
  10. height: 800px;   /* à ajuster */
  11. }
  12.     div.ligne {
  13.     margin-top: -5px; /* Ã  ajuster */
  14.     text-align: center;
  15. }
  16. </style>
  17.     <div class="ligne">
  18.       <IMG SRC="images/index1_a.png"><IMG SRC="images/index2_a.png"><IMG SRC="images/index3_a.png">
  19.     </div>
  20.      <div class="ligne">
  21.       <IMG SRC="images/index4_a.png"><IMG SRC="images/index5_a.png"><IMG SRC="images/index6_a.png">
  22.    
  23.  
  24.   </BODY>
  25. </HTML>

n°2411936
mechkurt
Posté le 10-03-2022 à 20:25:18  profilanswer
 

Ton truc risque de ne pas être responsive (ne pas bien marcher avec toutes les résolutions d'écran).
 
En mettant une taille en % et une largeur maximum pour ton conteneur, tu auras quelque chose qui s'affichera bien même sur un vieux mobile avec 300px de large par exemple...
 
https://jsfiddle.net/n5fys8Lz/
 

Code :
  1. <!doctype html>
  2. <html lang="fr">
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <style type="text/css" media="all">
  7. body {
  8.   background:#000;
  9. }
  10. div {
  11.   max-width:600px;
  12.   margin:0 auto;
  13. }
  14. img {
  15.   float:left;
  16.   width:50%;
  17.   height:auto;
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <div>
  23.   <img src="https://via.placeholder.com/300/0000FF/FFFFFF/?text=A">
  24.   <img src="https://via.placeholder.com/300/00FF00/FFFFFF/?text=B">
  25.   <img src="https://via.placeholder.com/300/FF0000/FFFFFF/?text=C">
  26.   <img src="https://via.placeholder.com/300/FF00FF/FFFFFF/?text=D">
  27.   <img src="https://via.placeholder.com/300/FFFF00/FFFFFF/?text=E">
  28.   <img src="https://via.placeholder.com/300/00FFFF/FFFFFF/?text=F">
  29. </div>
  30. </body>
  31. </html>

Message cité 1 fois
Message édité par mechkurt le 10-03-2022 à 20:34:14

---------------
D3
n°2411949
rufo
Pas me confondre avec Lycos!
Posté le 10-03-2022 à 21:42:53  profilanswer
 

Tu peux passer aussi par le src data base64 : https://fr.w3docs.com/tools/image-base64
Comme ça, plus de fichier image à télécharger.
Pour des images responsive : https://www.w3schools.com/howto/how [...] onsive.asp
Cet exemple pourra aussi sans doute t'aider pour la mise en page : https://www.w3schools.com/howto/how [...] y_side.asp
Un autre exemple de positionnement qui exploite le css3 (flexbox et grid) : https://developer.mozilla.org/fr/do [...] rid_Layout
 
Enfin, pour gérer différents types de tailles d'images suivant la taille de l'écran du terminal : https://www.dofactory.com/html/img/sizes

Message cité 2 fois

---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
n°2411991
froussel
Posté le 11-03-2022 à 16:47:26  profilanswer
 

mechkurt a écrit :

Ton truc risque de ne pas être responsive (ne pas bien marcher avec toutes les résolutions d'écran).
 
En mettant une taille en % et une largeur maximum pour ton conteneur, tu auras quelque chose qui s'affichera bien même sur un vieux mobile avec 300px de large par exemple...
 
https://jsfiddle.net/n5fys8Lz/
 

Code :
  1. <!doctype html>
  2. <html lang="fr">
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <style type="text/css" media="all">
  7. body {
  8.   background:#000;
  9. }
  10. div {
  11.   max-width:600px;
  12.   margin:0 auto;
  13. }
  14. img {
  15.   float:left;
  16.   width:50%;
  17.   height:auto;
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <div>
  23.   <img src="https://via.placeholder.com/300/0000FF/FFFFFF/?text=A">
  24.   <img src="https://via.placeholder.com/300/00FF00/FFFFFF/?text=B">
  25.   <img src="https://via.placeholder.com/300/FF0000/FFFFFF/?text=C">
  26.   <img src="https://via.placeholder.com/300/FF00FF/FFFFFF/?text=D">
  27.   <img src="https://via.placeholder.com/300/FFFF00/FFFFFF/?text=E">
  28.   <img src="https://via.placeholder.com/300/00FFFF/FFFFFF/?text=F">
  29. </div>
  30. </body>
  31. </html>



 
Merci mechkurt je viens de tester et en  mettant max-width:2600px; avec 48 morceaux de 324x324 sur 6 lignes de 8 morceaux cela ne fonctionne pas, les images ne sont pas dans une fenêtre de 2600 px de large sur chrome

n°2411993
mechkurt
Posté le 11-03-2022 à 17:24:38  profilanswer
 

Si tu veux des lignes de 8 morceaux, il faut que la width de tes img soit de 12.5% (100% / 8). :o

Message cité 1 fois

---------------
D3
n°2411994
froussel
Posté le 11-03-2022 à 17:27:44  profilanswer
 

rufo a écrit :

Tu peux passer aussi par le src data base64 : https://fr.w3docs.com/tools/image-base64
Comme ça, plus de fichier image à télécharger.


 
Mais je me demande s'il est possible d'automatiser l'encodage  

Citation :


Pour des images responsive : https://www.w3schools.com/howto/how [...] onsive.asp
Cet exemple pourra aussi sans doute t'aider pour la mise en page : https://www.w3schools.com/howto/how [...] y_side.asp


 
Cela me plait bien mais j'ai une ligne vide entre les deux lignes d'images.
 
Comment la faire disparaître ?
 

Code :
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. * {
  6.   box-sizing: border-box;
  7. }
  8. .column {
  9.   float: left;
  10.   width: 33.33%;
  11.   padding: 5px;
  12. }
  14. /* Clearfix (clear floats) */
  15. .row::after {
  16.   content: "";
  17.   clear: both;
  18.   display: table;
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <style type="text/css" media="all">
  25. /* Three image containers */
  26. .column {
  27.   float: left;
  28.   width: 12.5%;
  29.   padding: 0px;
  30. }
  32. /* Clear floats after image containers */
  33. .row::after {
  34.   content: "";
  35.   clear: both;
  36.   display: table;
  37. }
  39. </style>
  41. <h2>Images Side by Side</h2>
  42. <p>How to create side-by-side images with the CSS float property:</p>
  44. <div class="row">
  45.   <div class="column">
  46.     <IMG SRC="0001_01.png" style="width:100%"> 
  47.   </div>
  48. <div class="column">
  49.     <IMG SRC="0001_02.png" style="width:100%"> 
  50.   </div>
  51.   <div class="column">
  52.     <IMG SRC="0001_03.png" style="width:100%"> 
  53.   </div>
  54.   <div class="column">
  55.     <IMG SRC="0001_04.png" style="width:100%"> 
  56.   </div>
  57.    <div class="column">
  58.     <IMG SRC="0001_05.png" style="width:100%"> 
  59.   </div>
  60. <div class="column">
  61.     <IMG SRC="0001_06.png" style="width:100%"> 
  62.   </div>
  63.   <div class="column">
  64.     <IMG SRC="0001_07.png" style="width:100%"> 
  65.   </div>
  66.   <div class="column">
  67.     <IMG SRC="0001_08.png" style="width:100%"> 
  68.   </div>
  69. </div>
  71. <div class="row">
  72.   <div class="column">
  73.     <IMG SRC="0001_09.png" style="width:100%"> 
  74.   </div>
  75. <div class="column">
  76.     <IMG SRC="0001_10.png" style="width:100%"> 
  77.   </div>
  78.   <div class="column">
  79.     <IMG SRC="0001_11.png" style="width:100%"> 
  80.   </div>
  81.   <div class="column">
  82.     <IMG SRC="0001_12.png" style="width:100%"> 
  83.   </div>
  84.    <div class="column">
  85.     <IMG SRC="0001_13.png" style="width:100%"> 
  86.   </div>
  87. <div class="column">
  88.     <IMG SRC="0001_14.png" style="width:100%"> 
  89.   </div>
  90.   <div class="column">
  91.     <IMG SRC="0001_15.png" style="width:100%"> 
  92.   </div>
  93.   <div class="column">
  94.     <IMG SRC="0001_16.png" style="width:100%"> 
  95.   </div>
  96. </div>
  98. </body>
  99. </html>


n°2411995
froussel
Posté le 11-03-2022 à 17:32:24  profilanswer
 

rufo a écrit :

Tu peux passer aussi par le src data base64 : https://fr.w3docs.com/tools/image-base64
Comme ça, plus de fichier image à télécharger.


 
Mais je me demande s'il est possible d'automatiser l'encodage  

Citation :


Pour des images responsive : https://www.w3schools.com/howto/how [...] onsive.asp
Cet exemple pourra aussi sans doute t'aider pour la mise en page : https://www.w3schools.com/howto/how [...] y_side.asp


 
Cela me plait bien mais j'ai une ligne vide entre les deux lignes d'images.
 
Comment la faire disparaître ?
 

Code :
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. * {
  6.   box-sizing: border-box;
  7. }
  8. .column {
  9.   float: left;
  10.   width: 33.33%;
  11.   padding: 5px;
  12. }
  14. /* Clearfix (clear floats) */
  15. .row::after {
  16.   content: "";
  17.   clear: both;
  18.   display: table;
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <style type="text/css" media="all">
  25. /* Three image containers */
  26. .column {
  27.   float: left;
  28.   width: 12.5%;
  29.   padding: 0px;
  30. }
  32. /* Clear floats after image containers */
  33. .row::after {
  34.   content: "";
  35.   clear: both;
  36.   display: table;
  37. }
  39. </style>
  41. <h2>Images Side by Side</h2>
  42. <p>How to create side-by-side images with the CSS float property:</p>
  44. <div class="row">
  45.   <div class="column">
  46.     <IMG SRC="0001_01.png" style="width:100%"> 
  47.   </div>
  48. <div class="column">
  49.     <IMG SRC="0001_02.png" style="width:100%"> 
  50.   </div>
  51.   <div class="column">
  52.     <IMG SRC="0001_03.png" style="width:100%"> 
  53.   </div>
  54.   <div class="column">
  55.     <IMG SRC="0001_04.png" style="width:100%"> 
  56.   </div>
  57.    <div class="column">
  58.     <IMG SRC="0001_05.png" style="width:100%"> 
  59.   </div>
  60. <div class="column">
  61.     <IMG SRC="0001_06.png" style="width:100%"> 
  62.   </div>
  63.   <div class="column">
  64.     <IMG SRC="0001_07.png" style="width:100%"> 
  65.   </div>
  66.   <div class="column">
  67.     <IMG SRC="0001_08.png" style="width:100%"> 
  68.   </div>
  69. </div>
  71. <div class="row">
  72.   <div class="column">
  73.     <IMG SRC="0001_09.png" style="width:100%"> 
  74.   </div>
  75. <div class="column">
  76.     <IMG SRC="0001_10.png" style="width:100%"> 
  77.   </div>
  78.   <div class="column">
  79.     <IMG SRC="0001_11.png" style="width:100%"> 
  80.   </div>
  81.   <div class="column">
  82.     <IMG SRC="0001_12.png" style="width:100%"> 
  83.   </div>
  84.    <div class="column">
  85.     <IMG SRC="0001_13.png" style="width:100%"> 
  86.   </div>
  87. <div class="column">
  88.     <IMG SRC="0001_14.png" style="width:100%"> 
  89.   </div>
  90.   <div class="column">
  91.     <IMG SRC="0001_15.png" style="width:100%"> 
  92.   </div>
  93.   <div class="column">
  94.     <IMG SRC="0001_16.png" style="width:100%"> 
  95.   </div>
  96. </div>
  98. </body>
  99. </html>


Message cité 1 fois
mood
Publicité
Posté le 11-03-2022 à 17:32:24  profilanswer
 

n°2411996
froussel
Posté le 11-03-2022 à 17:39:25  profilanswer
 

mechkurt a écrit :

Si tu veux des lignes de 8 morceaux, il faut que la width de tes img soit de 12.5% (100% / 8). :o


 
Impeccable !!

n°2412170
gatsu35
Blablaté par Harko
Posté le 14-03-2022 à 04:18:35  profilanswer
 

froussel a écrit :

 

Mais je me demande s'il est possible d'automatiser l'encodage

Citation :


Pour des images responsive : https://www.w3schools.com/howto/how [...] onsive.asp
Cet exemple pourra aussi sans doute t'aider pour la mise en page : https://www.w3schools.com/howto/how [...] y_side.asp

 

Cela me plait bien mais j'ai une ligne vide entre les deux lignes d'images.

 

Comment la faire disparaître ?

 



C'est une petite ligne de quelques pixels ?
Si oui, alors rajoute dans ta CSS

 

[code]
img {
  display:block; // marche aussi avec un vertical-align:middle
}
[code]


Message édité par gatsu35 le 14-03-2022 à 04:18:44

---------------
Blablaté par Harko
n°2412314
Je@nb
Kindly give dime
Posté le 15-03-2022 à 13:35:39  profilanswer
 

alors qu'il suffit de bloquer le hotlinking :/
https://mediatemple.net/community/p [...] ccess-file par exemple

n°2412324
mechkurt
Posté le 15-03-2022 à 14:22:24  profilanswer
 

C'est une possibilité mais on ne sait pas comment il se fait voler son image...
 
Tu sais qu'on peut simuler un referer (c'est envoyé en entête par le client et rien de ce qu'envoie un client est 100% fiable).
https://stackoverflow.com/questions [...] tp-referer
Donc si "les webmasters peu scrupuleux" font du curl pour récupérer l'image sur leur serveur ça ne réglera rien (et il est possible qu'il le fasse car si il font du hotlinking il est facile de prouver le "vol" ).


Message édité par mechkurt le 15-03-2022 à 14:24:30

---------------
D3
n°2412341
Je@nb
Kindly give dime
Posté le 15-03-2022 à 15:23:16  profilanswer
 

Biensûr que je sais, c'est un peu mon domaine :D
Mais on parle de "copie trop facile" ici. Il est bien plus simple pour le "webmaster" de copier le code html avec les XX images pour les mettre sur son site que de s'amuser à aller spoofer un referrer pour récupérer l'image, la stocker et la réafficher.

n°2412346
mechkurt
Posté le 15-03-2022 à 15:58:44  profilanswer
 

Ben du coups ce qui serait le plus utile c'est d'avoir un nom d'image dynamique en local avec un htaccess qui pointe sur un php qui lit le vrai fichier non ?
Comme ça son code html ne sera plus valide...
Je supposes qu'il voulait aussi éviter le "enregistrer sous" trop simple à effectuer.
 
Enfin je sais pas, j'aurais tendance à dire qu'il faut aussi menacer "les webmasters peu scrupuleux" de poursuite non ?


---------------
D3

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Découper une image en morceaux pour éviter la copie trop facile

 

Sujets relatifs
Insertion image en html depuis mon ordiresponsive scroll pas quand je glisse l'image
Probleme d'edition d'image dans DjangoEnvoi image sur blog impossible
Aligner le background au milieu de l'image[Batch] Ajout date création au nom lors d'une copie
Affichage d'une image en infobulle au survol d'un lien (hover)[powershell] copie/màj de répertoires
faire apparaitre 1 image sur le webBatch dont la modification ne fonctionne que si je copie le fichier
Plus de sujets relatifs à : Découper une image en morceaux pour éviter la copie trop facile

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

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