0

Estoy haciendo una pagina web de mis fotos en venda. He pensado de mostrarlas en cards, el problema es que si cojo la imagen con click izquierdo y la arrastro en el navegador, se carga en una pestaña y te la puedes descargar, entonces eso no tiene mucho sentido para mi caso.

Me recomendáis otra tecnología o me ayudáis a encontrar algo que no deje a la persona que esta operando que pueda interaccionar con la imagen.

CÓDIGO:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>


<div class="row mx-auto p-3">
    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
        <div class="card ">
            <img src="" class="card-img-top" alt="Card image"/>
            <div class="card-block">
                <h4 class="card-title">This is a title</h4>
                <p class="card-text">
                    Each merged squad salts the wild porter. Should the charmed 
                    church dodge a camera? The gown litters the rhyme. Another 
                    discrete elevator defects over the target.
                </p>
                <a href="" class="btn btn-success">Button</a>
            </div>
        </div>
    </div>
    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
        <div class="card">
            <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzE4IiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDMxOCAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTRmZTA1OGRkZmIgdGV4dCB7IGZpbGw6cmdiYSgyNTUsMjU1LDI1NSwuNzUpO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LWZhbWlseTpIZWx2ZXRpY2EsIG1vbm9zcGFjZTtmb250LXNpemU6MTZwdCB9IF1dPjwvc3R5bGU+PC9kZWZzPjxnIGlkPSJob2xkZXJfMTRmZTA1OGRkZmIiPjxyZWN0IHdpZHRoPSIzMTgiIGhlaWdodD0iMTgwIiBmaWxsPSIjNzc3Ii8+PGc+PHRleHQgeD0iMTE4LjA4NTkzNzUiIHk9Ijk3LjIiPjMxOHgxODA8L3RleHQ+PC9nPjwvZz48L3N2Zz4="
                     class="card-img-top" alt="Card image"/>
            <div class="card-block">
                <h4 class="card-title">This is a title</h4>
                <p class="card-text">
                    Each merged squad salts the wild porter. Should the charmed 
                    church dodge a camera? The gown litters the rhyme. Another 
                    discrete elevator defects over the target.
                </p>
                <a href="" class="btn btn-success">Button</a>
            </div>
        </div> 
    </div>
    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
        <div class="card .img-fluid">
            <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzE4IiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDMxOCAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTRmZTA1OGRkZmIgdGV4dCB7IGZpbGw6cmdiYSgyNTUsMjU1LDI1NSwuNzUpO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LWZhbWlseTpIZWx2ZXRpY2EsIG1vbm9zcGFjZTtmb250LXNpemU6MTZwdCB9IF1dPjwvc3R5bGU+PC9kZWZzPjxnIGlkPSJob2xkZXJfMTRmZTA1OGRkZmIiPjxyZWN0IHdpZHRoPSIzMTgiIGhlaWdodD0iMTgwIiBmaWxsPSIjNzc3Ii8+PGc+PHRleHQgeD0iMTE4LjA4NTkzNzUiIHk9Ijk3LjIiPjMxOHgxODA8L3RleHQ+PC9nPjwvZz48L3N2Zz4="
                  class="card-img-top" alt="Card image"/>
    
             <div class="card-block">
                 <h4 class="card-title">This is a title</h4>
                 <p class="card-text">
                     Each merged squad salts the wild porter. Should the 
                     charmed church dodge a camera? The gown litters the rhyme. 
                     Another discrete elevator defects over the target.
                 </p>
                 <a href="" class="btn btn-success">Button</a>
             </div>
         </div>
     </div>
    
 </div>
 </div>

2 ACTUALIZACIÓN:

Este es el codigo que tengo, hos explico esto es una función que luego la llamo en otra página, con esto tengo varios problemas ya que por ejemplo, algunas funciones del stylesheet dejan de funcionar ( Diseño del card de bootstrap pierde todo el estilo dado al meterlo en una función )etc. Los print imprimen las fotos de la base a la pagina.

CODIGO:

/**********************************
	Función visualizar las imagenes 
	que estan en la ruta guardada en la 
	BD
	**********************************/
	public function viewImages()
	{
		$SQLStatement = $this->DBConexion->prepare("SELECT * FROM productosima");
		$SQLStatement->execute();
        echo'<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>'; 
		
		while($img = $SQLStatement->fetch(PDO::FETCH_ASSOC))
		{
		?>
		
		<div class="row mx-auto p-3">
		<style>
		.imagen{
			height: 180px;
			width: 318px;
			background-color: #BDBDBD;
			background-position: 0% 50%;
			background-repeat: no-repeat;
			background-size: cover;
			background-attachment: inherit;
		}
		</style>
	<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
	<div class="imagen" style="background:url"<?php print($img['imagen']); ?>;></div>
		<div class="card">
			<img src="<?php print($img['imagen']); ?>"
				 class="card-img-top" alt="Card image"/>
			<div class="card-block">
				<h4 class="card-title">This is a title</h4>
				<p class="card-text">Each merged squad salts the wild porter. Should the charmed church dodge a camera? The gown litters the rhyme. Another discrete elevator defects over the target.</p>
				<a href="" class="btn btn-success">Button</a>
			</div>
		</div>
	</div>	
	
		<?php 
		}
	}

}

?>	

Aquí es como he colocado lo que me habeis dicho, pero no funciona.

Aquí como lo tengo originalmente:

/**********************************
	Función visualizar las imagenes 
	que estan en la ruta guardada en la 
	BD
	**********************************/
	public function viewImages()
	{
		$SQLStatement = $this->DBConexion->prepare("SELECT * FROM productosima");
		$SQLStatement->execute();
        echo'<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>'; 
		
		while($img = $SQLStatement->fetch(PDO::FETCH_ASSOC))
		{
		?>
		
		<div class="row mx-auto p-3">
		
	<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
		<div class="card">
			<img src="<?php print($img['imagen']); ?>"
				 class="card-img-top" alt="Card image"/>
			<div class="card-block">
				<h4 class="card-title">This is a title</h4>
				<p class="card-text">Each merged squad salts the wild porter. Should the charmed church dodge a camera? The gown litters the rhyme. Another discrete elevator defects over the target.</p>
				<a href="" class="btn btn-success">Button</a>
			</div>
		</div>
	</div>	
	
		<?php 
		}
	}

}

?>	

COMO GUARDO LA RUTA:

	/**********************************
	Función para guardar la ruta de la
	   Imagen en la base de datos
	**********************************/
	public function uploadImage($Imagen)
	{
		$ruta = 'imagenes/'.$Imagen['imagen']['name'];
		move_uploaded_file($Imagen['imagen']['tmp_name'],$ruta);
		$SQLStatement = $this->DBConexion->prepare("INSERT INTO productosima (imagen) VALUES (:url)");
		$SQLStatement->bindParam(":url",$ruta);
		$SQLStatement->execute();
	}

Gracias

4
  • 3
    La imagen de un sitio web siempre se podrá descargar, si no quieres que la utilicen sin tu consentimiento puedes agregar una sello de agua sobre la imagen a la hora de editar. Commented el 18 jul. 2019 a las 1:07
  • Como comenta @CésarAlejandroM, en las páginas que necesitan que no puedas descargar la imagen ya que es su producto de venta, lo que hacen es añadirle una marca de agua, no una pequeña sino que la llenan de diagonales medio opacas que te dejan ver la imagen, pero que no son fáciles de quitar. Por lo que tu tendrías 2 imágenes, la real (sin marca de agua), que será la que descarguen al comprarla, y la que tiene marca de agua, que es la que mostraras en todo momento en pantalla.
    – x3k
    Commented el 18 jul. 2019 a las 6:39
  • Hola, otra opción podría ser que uses en tu pagina copias de menor calidad de las imágenes, de ese modo no expones tus imágenes originales para que se descarguen gratis, hay muchas formas de crear esas copias. Commented el 18 jul. 2019 a las 15:13
  • Para las marcas de agua también me gustaria aprender mas del tema, sabeis como lo podria hacer, tengo una base de datos, entonces yo creo que seria fàcil guardar el mismo nombre de las imagenes y mostrar una cuando sea, pero crear las marcas de agua, eso es un programa? O lo tengo que hacer manualmente?
    – Jack More
    Commented el 19 jul. 2019 a las 8:01

1 respuesta 1

0

lo que yo te recomiendo en tal caso, es que hagas lo siguiente, vas a hacer un div

<div class="imagen" style="background:url(http://miweb.com/midireccion/imagen.jpg);"></div> 

con esto evitas que se arrastre la foto, luego en la clase imagen tenemos lo siguiente:

.imagen{
    height: 150px;
    width: 150px;
    background-color: #BDBDBD;
    background-position: 0% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: inherit;
}

Luego de todo esto ahora vamos con otra validación para que aun teniendo el enlace de la foto no puedan descargarla, esto se hace con .htaccess crearas un archivo con esta extensión en el directorio raiz de tu proyecto, y le colocaras options -Indexes y luego le colocaras

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^http://sitio.com*/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http://sitio.com*$ [NC]
RewriteRule .*\.(jpg|jpeg|gif|png|bmp|zip)$ - [F,NC]

Sustituye solo "http://sitio.com" por la dirección URL de tu sitio web.

Con esto creo evitaras al menos que tengan acceso. Cuentanos como te va.

4
  • Vale, voy a probarlo, el problema que ya me esta dando bastantes dolores de cabeza es que yo tengo las imagenes guardadas en una base de datos, entonces no sé si cuando pones lo del style="background:url(miweb.com/midireccion/imagen.jpg); se puede editar para que se vayan poniendo las fotos de la base de datos. Gracias
    – Jack More
    Commented el 19 jul. 2019 a las 7:56
  • He hecho una actualización, a hi esta mi codigo, no logro hacer que funcione. Otra pregunta options -Indexes tiene que ser el nombre del archivo .htaccess? Gracias
    – Jack More
    Commented el 19 jul. 2019 a las 9:43
  • Te recomiendo que solo guardes la ruta en la base de datos, la imagen solo la subes a una carpeta en el proceso de subida con la funcion copy() php.net/manual/es/function.copy.php puedes usarla de la siguiente forma copy($_FILES['image']['tmp_name'], $path); donde $path tiene la ruta hacia la carpeta donde guardaras la imagen. Luego de eso, cuando quieras imprimir el resultado, con un ciclo normal como foreach por ejemplo solo colocas style="background:url(<?php echo $rutaDeBaseDeDatos; ?>);"
    – dorinix
    Commented el 19 jul. 2019 a las 10:56
  • lo del .htaccess si es asi amigo, le pones options -Indexes mas el bloque que continua en la parte de abajo
    – dorinix
    Commented el 19 jul. 2019 a las 10:57

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.