Afficher des photos « masquées » en HTML

[josh99]

Bonjour,

 

Je ne suis pas très fort en programmation, c’est pourquoi j’utilise FrontPage 2003 et quelques rudiments d’HTML.

 

Je sais, pour l’avoir vu, qu’il est possible de faire en sorte que des images, plans, photos puissent s’afficher sans qu’il soit possible de copier l’élément en question, ni par le menu du browser, ni avec les touches de raccourci.

 

J’aurais voulu savoir comment procéder, avec un exemple simple.

Si ce n’est pas possible en HTML, peut importe du moment que vous m’expliquer comment procéder.

 

C’est pour ma page Web personnelle: afin d’éviter que des photos familiales soient détournés, dénaturés de leurs présence sur le Web.

 

J’ai toutes mes images dans un répertoire du même nom « Images » sur le site, et crée des liens pour y accéder depuis les différentes pages.

 

 

Merci

[mediaforest]

à moins de protéger l'accès à ton dossier par une authentification login / password, tu ne peux pas faire grand chose pour empêcher quelqu'un de récupérer tes photos d'une manière ou d'une autre...

 

Il existe des scripts javascripts qui affichent un message d'alerte à la place du menu contextuel quand on essaie de sauver une image; mais il suffit de désactiver javascript ou bien d'utiliser l'extension noscript des navigateurs de la famille mozilla pour passer outre le script, et de toute façon l'url des photos apparait dans le code, à moins d'utiliser du php ou du perl pour afficher les images... et encore, même dans ce cas, une simple capture d'écran permet de s'approprier les photos puisqu'à partir du moment où elles sont visibles, elles sont capturables.

C'est pour celà que le seul moyen de protéger tes images, c'est de ne permettre leur visualisation qu'à des personnes autorisées.

[josh99]

à moins de protéger l'accès à ton dossier par une authentification login / password, tu ne peux pas faire grand chose pour empêcher quelqu'un de récupérer tes photos d'une manière ou d'une autre...

 

Il existe des scripts javascripts qui affichent un message d'alerte à la place du menu contextuel quand on essaie de sauver une image; mais il suffit de désactiver javascript ou bien d'utiliser l'extension noscript des navigateurs de la famille mozilla pour passer outre le script, et de toute façon l'url des photos apparait dans le code, à moins d'utiliser du php ou du perl pour afficher les images... et encore, même dans ce cas, une simple capture d'écran permet de s'approprier les photos puisqu'à partir du moment où elles sont visibles, elles sont capturables.

C'est pour celà que le seul moyen de protéger tes images, c'est de ne permettre leur visualisation qu'à des personnes autorisées.

 

Je sais bien qu’il est toujours possible de faire des captures d’écran, voir des captures de sites complets.

 

Je suis intéressé par la façon de procéder en PHP, si tu pouvais m’en dire un peu plus.

Voir en PERL si non.

 

Merci

[mediaforest]

voici un petit exemple de code php qui permet d'afficher une image sans que son url apparaisse dans le code, les informations sur les images sont stockées dans une table de données MySQL

 

(attention, ça n'empêche pas le visiteur de faire : clic droit/enregistrer l'image sous)

<?php
// Afficher une image à partir de la base de données
// Le nom du fichier n'apparait pas

$images_path = "/var/www/html/images/"; // dossier où sont stockées les images

// contrôle de l'existence d'une image
if(empty($ID_IMAGE)) { // Si l'id de l'image dans la base de données n'est pas défini
die("<h1>pas d'image</h1>"); // on ne peut pas l'afficher
}
else { // si l'identifiant de l'image existe, on récupère les infos dans la base de données
$query = "SELECT * FROM IMAGES WHERE ID_IMAGE = $ID_IMAGE"; 
$result = mysql_query($query);   
$fiche_image = mysql_fetch_assoc($result);
$full_path = $images_path.$fiche_image["NOM_IMAGE"]; 

if(!file_exists($full_path)) // Vérifie l'existence de l'image sur le disque
	die("Cette image n'existe pas ! => Recommencer"); // si l'image n'est pas sur le disque, on ne peut pas l'afficher
} // END else

// affichage de l'image
$im = imagecreatefromstring(file_get_contents($full_path));
if ( imageistruecolor($im)) { // si l'image est "truecolor" on l'affiche en jpeg
 // Content type
 header('Content-type: image/jpeg');
 // Affichage
 imagejpeg($im, null, 75);
} // END if ( imageistruecolor($im))

else { // si l'image n'est pas "truecolor", on l'affiche en png
 // Content type
 header('Content-type: image/png');
 // Affichage
 imagepng($im);
} // END else
?>

[josh99]

Je me suis mal exprimé.

 

Comment pouvoir visualiser une image, et qu’il ne soit possible de la copier qu’en faisant un imprime écran ou une aspiration de site Web ?

 

Sans en arriver à créer un contrôle d’accès à certaines pages du site Web.

Modifié le 13 septembre 2006 par josh99

[josh99]

Je me suis mal exprimé.

 

Comment pouvoir visualiser une image, et qu’il ne soit possible de la copier qu’en faisant un imprime écran ou une aspiration de site Web ?

 

Sans en arriver à créer un contrôle d’accès à certaines pages du site Web.

 

Bonjour,

 

Vu le nombre de réponse à ma question, peut être n’est-ce pas possible en HTML ni PHP, mais faisable en JAVA ?

 

Si vous avez une idée sur la question

[josh99]

Bonjour,

 

Vu le nombre de réponse à ma question, peut être n’est-ce pas possible en HTML ni PHP, mais faisable en JAVA ?

 

Si vous avez une idée sur la question

 

Pas d’adeptes pour m’aider en Java ?

[KewlCat]

Euh... Oui, il est possible d'afficher une image avec une applet Java, et cette image ne sera pas disponible pour faire un clic-droit + enregistrer l'image...

Ca dépend de ce que tu veux faire, mais sincèrement c'est peut-être un peu lourd de "planquer" ses images dans du Java si elles sont copiables par une impression d'écran. Si tu veux te protéger contre le pillage, ne serait-il pas mieux d'utiliser les bonnes vieilles méthodes de watermarking ?

 

Une autre solution "rapide" (et inefficace, il faut bien le dire) que j'ai vue en place sur un site Web : tu disposes ton image "sous" (avec un z-index inférieur) un div transparent de la même taille : le clic-droit ne propose pas le menu lié à l'image puisque l'événement "click" est reçu par la div invisible...

[josh99]

Euh... Oui, il est possible d'afficher une image avec une applet Java, et cette image ne sera pas disponible pour faire un clic-droit + enregistrer l'image...

Ca dépend de ce que tu veux faire, mais sincèrement c'est peut-être un peu lourd de "planquer" ses images dans du Java si elles sont copiables par une impression d'écran. Si tu veux te protéger contre le pillage, ne serait-il pas mieux d'utiliser les bonnes vieilles méthodes de watermarking ?

 

Une autre solution "rapide" (et inefficace, il faut bien le dire) que j'ai vue en place sur un site Web : tu disposes ton image "sous" (avec un z-index inférieur) un div transparent de la même taille : le clic-droit ne propose pas le menu lié à l'image puisque l'événement "click" est reçu par la div invisible...

 

J’ai lu l’article sur le Watermarking, et ce n’est pas du tout ce que je recherche.

 

C’est un album photos composé de plusieurs pages Web contenant chacune plusieurs photos soit à leur taille réelle, soit qui donnent accès à un page plein écran avec la photo en gros plan.

 

Pourrait-tu détailler ce que tu entends par : « tu dispose ton image "sous" (avec un z-index inférieur) un div transparent de la même taille » et comment le faire ?

 

Je ne connaît pas Java, mais par curiosité intellectuelle cela m’intéresserais de savoir comment tu peut le faire avec une applet Java !

 

Merci

[KewlCat]

Tiens, pour l'image en Java : http://www.realapplets.com/tutorial/ImageExample.html

/*
This applet will display a gif on screen
for now the gif file must be in the same directory as this applet
*/

import java.awt.*;
import java.applet.*;
// These classes are for Url's.
import java.net.*;

public class ImageExample extends Applet
{
// Your image name;
 Image my_gif;

// The applet base URL
 URL base;

// This object will allow you to control loading
 MediaTracker mt;

 public void init() 
 {

 // initialize the MediaTracker
	  mt = new MediaTracker(this);

 // The try-catch is necassary when the URL isn't valid
 // Ofcourse this one is valid, since it is generated by
 // Java itself.

	 try {
  // getDocumentbase gets the applet path.
		   base = getDocumentBase();
	 }
	 catch (Exception e) {}

 // Here we load the image.
 // Only Gif and JPG are allowed. Transparant gif also.
	  my_gif = getImage(base,"imageExample.gif");

 // tell the MediaTracker to kep an eye on this image, and give it ID 1;
	  mt.addImage(my_gif,1);

 // now tell the mediaTracker to stop the applet execution
 // (in this example don't paint) until the images are fully loaded.
 // must be in a try catch block.

	 try {
		   mt.waitForAll();
	  }
	  catch (InterruptedException  e) {}

 // when the applet gets here then the images is loaded.

 }

 public void paint(Graphics g) 
 {
 // now we are going to draw the gif on the screen
 // (image name,x,y,observer);

	  g.drawImage(my_gif,20,20,this);

 // you can resize the image easily

	  g.drawImage(my_gif,20,140,30,40,this);


 }

}

// That's all. Images can alos be drawn without the mediaTracker but then
// the screen will flicker.
// a base URL variable is also not necessary but when you have lots of images to load
// then it's shorter to type.

// Next is the basic GUI (Grphical User Interface) components.
// go to guiExample.java

Je suppose qu'il y a plus efficace ou plus récent (cela dit, utiliser AWT n'est pas forcément le pire solution), mais c'est un bon début. le MediaTracker peut servir à beaucoup d'autres choses, et Graphics.drawImage() est ce qu'il y a de plus simple à manipuler quand on débute...

 

Pourrait-tu détailler ce que tu entends par : « tu dispose ton image "sous" (avec un z-index inférieur) un div transparent de la même taille » et comment le faire ?

<div id="conteneur">
 <div style="{ z-index: 0; width: 320px; height: 200px; position: absolute; top: 0px; left: 0px; }">
<img src="plop.gif" alt="" />
 </div>
 <div style="{ z-index: 1; width: 320px; height: 200px; position: absolute; top: 0px; left: 0px; }">
<!-- Ce div est "transparent" -->
 </div>
</div>