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

Marsh Posté le 10-03-2022 à 12:37:58

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 :

<HTML>
<BODY>
<style>
div.ligne {
margin-top: -5px; /* à ajuster */
text-align: center;
}
</style>
<div class="ligne">
<IMG SRC="images/index1_a.png"><IMG SRC="images/index2_a.png"><IMG SRC="images/index3_a.png">
</div>
<div class="ligne">
<IMG SRC="images/index4_a.png"><IMG SRC="images/index5_a.png"><IMG SRC="images/index6_a.png">
</BODY>
</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

Reply

Marsh Posté le 10-03-2022 à 12:37:58

Reply

Marsh Posté le 10-03-2022 à 14:12:54

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 ?

---------------
Topic .Net - C# @ Prog

Reply

Marsh Posté le 10-03-2022 à 14:13:10

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

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

Reply

Marsh Posté le 10-03-2022 à 19:17:58

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 :

<HTML>
<BODY>
<style type="text/css">
body {
width: 1200px; /* Ã ajuster */
margin-right: auto;
margin-left: auto;
background-color: #cccccc;
height: 800px; /* Ã ajuster */
}
div.ligne {
margin-top: -5px; /* Ã ajuster */
text-align: center;
}
</style>
<div class="ligne">
<IMG SRC="images/index1_a.png"><IMG SRC="images/index2_a.png"><IMG SRC="images/index3_a.png">
</div>
<div class="ligne">
<IMG SRC="images/index4_a.png"><IMG SRC="images/index5_a.png"><IMG SRC="images/index6_a.png">
</BODY>
</HTML>

Reply

Marsh Posté le 10-03-2022 à 20:25:18

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 :

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style type="text/css" media="all">
body {
background:#000;
}
div {
max-width:600px;
margin:0 auto;
}
img {
float:left;
width:50%;
height:auto;
}
</style>
</head>
<body>
<div>
<img src="https://via.placeholder.com/300/0000FF/FFFFFF/?text=A">
<img src="https://via.placeholder.com/300/00FF00/FFFFFF/?text=B">
<img src="https://via.placeholder.com/300/FF0000/FFFFFF/?text=C">
<img src="https://via.placeholder.com/300/FF00FF/FFFFFF/?text=D">
<img src="https://via.placeholder.com/300/FFFF00/FFFFFF/?text=E">
<img src="https://via.placeholder.com/300/00FFFF/FFFFFF/?text=F">
</div>
</body>
</html>

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

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

Reply

Marsh Posté le 10-03-2022 à 21:42:53

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

Reply

Marsh Posté le 11-03-2022 à 16:47:26

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 :

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style type="text/css" media="all">
body {
background:#000;
}
div {
max-width:600px;
margin:0 auto;
}
img {
float:left;
width:50%;
height:auto;
}
</style>
</head>
<body>
<div>
<img src="https://via.placeholder.com/300/0000FF/FFFFFF/?text=A">
<img src="https://via.placeholder.com/300/00FF00/FFFFFF/?text=B">
<img src="https://via.placeholder.com/300/FF0000/FFFFFF/?text=C">
<img src="https://via.placeholder.com/300/FF00FF/FFFFFF/?text=D">
<img src="https://via.placeholder.com/300/FFFF00/FFFFFF/?text=E">
<img src="https://via.placeholder.com/300/00FFFF/FFFFFF/?text=F">
</div>
</body>
</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

Reply

Marsh Posté le 11-03-2022 à 17:24:38

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

Message cité 1 fois

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

Reply

Marsh Posté le 11-03-2022 à 17:27:44

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 :

<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.column {
float: left;
width: 33.33%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<style type="text/css" media="all">
/* Three image containers */
.column {
float: left;
width: 12.5%;
padding: 0px;
}
/* Clear floats after image containers */
.row::after {
content: "";
clear: both;
display: table;
}
</style>
<h2>Images Side by Side</h2>
<p>How to create side-by-side images with the CSS float property:</p>
<div class="row">
<div class="column">
<IMG SRC="0001_01.png" style="width:100%">
</div>
<div class="column">
<IMG SRC="0001_02.png" style="width:100%">
</div>
<div class="column">
<IMG SRC="0001_03.png" style="width:100%">
</div>
<div class="column">
<IMG SRC="0001_04.png" style="width:100%">
</div>
<div class="column">
<IMG SRC="0001_05.png" style="width:100%">
</div>
<div class="column">
<IMG SRC="0001_06.png" style="width:100%">
</div>
<div class="column">
<IMG SRC="0001_07.png" style="width:100%">
</div>
<div class="column">
<IMG SRC="0001_08.png" style="width:100%">
</div>
</div>
<div class="row">
<div class="column">
<IMG SRC="0001_09.png" style="width:100%">
</div>
<div class="column">
<IMG SRC="0001_10.png" style="width:100%">
</div>
<div class="column">
<IMG SRC="0001_11.png" style="width:100%">
</div>
<div class="column">
<IMG SRC="0001_12.png" style="width:100%">
</div>
<div class="column">
<IMG SRC="0001_13.png" style="width:100%">
</div>
<div class="column">
<IMG SRC="0001_14.png" style="width:100%">
</div>
<div class="column">
<IMG SRC="0001_15.png" style="width:100%">
</div>
<div class="column">
<IMG SRC="0001_16.png" style="width:100%">
</div>
</div>
</body>
</html>

Reply

Marsh Posté le 11-03-2022 à 17:32:24

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 :

<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.column {
float: left;
width: 33.33%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<style type="text/css" media="all">
/* Three image containers */
.column {
float: left;
width: 12.5%;
padding: 0px;
}
/* Clear floats after image containers */
.row::after {
content: "";
clear: both;
display: table;
}
</style>
<h2>Images Side by Side</h2>
<p>How to create side-by-side images with the CSS float property:</p>
<div class="row">
<div class="column">
<IMG SRC="0001_01.png" style="width:100%">
</div>
<div class="column">
<IMG SRC="0001_02.png" style="width:100%">
</div>
<div class="column">
<IMG SRC="0001_03.png" style="width:100%">
</div>
<div class="column">
<IMG SRC="0001_04.png" style="width:100%">
</div>
<div class="column">
<IMG SRC="0001_05.png" style="width:100%">
</div>
<div class="column">
<IMG SRC="0001_06.png" style="width:100%">
</div>
<div class="column">
<IMG SRC="0001_07.png" style="width:100%">
</div>
<div class="column">
<IMG SRC="0001_08.png" style="width:100%">
</div>
</div>
<div class="row">
<div class="column">
<IMG SRC="0001_09.png" style="width:100%">
</div>
<div class="column">
<IMG SRC="0001_10.png" style="width:100%">
</div>
<div class="column">
<IMG SRC="0001_11.png" style="width:100%">
</div>
<div class="column">
<IMG SRC="0001_12.png" style="width:100%">
</div>
<div class="column">
<IMG SRC="0001_13.png" style="width:100%">
</div>
<div class="column">
<IMG SRC="0001_14.png" style="width:100%">
</div>
<div class="column">
<IMG SRC="0001_15.png" style="width:100%">
</div>
<div class="column">
<IMG SRC="0001_16.png" style="width:100%">
</div>
</div>
</body>
</html>

Message cité 1 fois

Reply

Marsh Posté le 11-03-2022 à 17:32:24

Reply

Marsh Posté le 11-03-2022 à 17:39:25

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

Impeccable !!

Reply

Marsh Posté le 14-03-2022 à 04:18:35

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

Reply

Marsh Posté le 15-03-2022 à 13:35:39

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

Reply

Marsh Posté le 15-03-2022 à 14:22:24

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

Reply

Marsh Posté le 15-03-2022 à 15:23:16

Biensûr que je sais, c'est un peu mon domaine
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.

Reply

Marsh Posté le 15-03-2022 à 15:58:44

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

Reply

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

Sujets relatifs:

Leave a Replay