proteger - title html
Proteger la descarga de imágenes (10)
Sé que la mejor manera de proteger la descarga de imágenes no es ponerlo en internet en primer lugar.
Supongo que no existe una protección del 100% contra la descarga de imágenes y que si un usuario puede ver una imagen en Internet puede, con un poco de experiencia, encontrar acceso para descargarla.
Soy consciente de .gif o .png transparentes que cubren las imágenes o usan background_image propiedad CSS background_image para protegerlo y evitar la descarga con el botón derecho del mouse, pero están ahí
¿otras formas de complicar la descarga de imágenes y, por lo tanto, evitar la descarga de imágenes por la mayoría de los usuarios?
Aquí hay un FIDDLE con código para comenzar:
<img src="http://placekitten.com/600/450">
Aquí hay algunas maneras de proteger las imágenes en su sitio web.
1. Pon una capa transparente o una máscara opaca baja sobre la imagen
Por lo general, la fuente de la imagen está abierta al público en cada página web. Entonces, la imagen real está debajo de esta máscara y se vuelve inalcanzable. Asegúrese de que la imagen de la máscara sea del mismo tamaño que la imagen original.
<body>
<div style="background-image: url(real_background_image.jpg);">
<img src="transparent_image.gif" style="height:300px;width:250px" />
</div>
</body>
2. Divide la imagen en unidades pequeñas usando script
Se usa una secuencia de comandos de azulejos de imagen súper simple para realizar esta operación. El script dividirá la imagen real en pedazos y ocultará la imagen real como marca de agua. Este es un método muy útil y eficaz para proteger imágenes, pero aumentará la solicitud al servidor para que cargue cada imagen.
Ver más información here .
Como algunas personas ya dijeron que no es posible evitar que las personas descarguen sus imágenes, un truco podría ser algo como esto:
$(document).ready(function()
{
$(''img'').bind(''contextmenu'', function(e){
return false;
});
});
Este truco evita que haga clic con el botón derecho en todos los img. Obviamente, las personas pueden abrir el código fuente y descargar las imágenes usando enlaces en su código fuente.
Como dijeron otras respuestas, si puedes verlo puedes copiarlo / descargarlo.
Para agregar otras respuestas, solo para su información, puede agregar marcas de agua invisibles o engañosas a sus imágenes: http://www.cgrats.com/create-an-invisible-watermark-in-photoshop.html (solo una ejemplo, hay más técnicas, solo google para marcas de agua invisibles)
De todos modos, si desea probar la propiedad de su imagen, una buena forma es tener una copia de mayor resolución para usted y siempre publicar una de menor resolución / tamaño. O publíquelo también en un medio "público" como ... deviantart o flickr o algo donde la gente no puede cambiar la fecha de carga. De esta forma puedes demostrar que tienes esa imagen antes que nadie
Como sabemos, no existe un método adecuado para evitar el robo de imágenes. Pero podemos reducirlo en cierta medida. Podemos evitar que las personas que no son geek en las computadoras descarguen la imagen y su código. Aquí hay algunos trucos de JQuery que deberíamos incluir en nuestro sitio para reducir el robo de imágenes
- Deshabilitar clic derecho
- Deshabilitar Ctrl + combinación (ex Ctrl + s, Ctrl + u) [Mejor para deshabilitar la tecla Ctrl]
Pero el usuario también puede descargar la página web usando herramientas de desarrollador en Firefox. No tenemos solución para esto porque esto estará en el lado del cliente y lo proporciona el navegador del usuario.
Puede encontrar el código de todos los anteriores en el desbordamiento de la pila
No existe un método de prueba completo para guardar la imagen que se está descargando / robando.
pero algunos son como: filmar sus imágenes (en el lado del cliente o del servidor), usar la imagen de fondo , desactivar los clics, cortar las imágenes en pequeños pedazos y se presentan como un todo, también puede usar el flash para mostrar las imágenes.
los métodos recomendados personalmente son; usa marcas de agua para tu imagen y método flash. pero es una misión difícil, casi imposible de hacer. Como el usuario puede ver esa imagen, eso significa que puede usar "imprimir captura de pantalla" para obtener esa imagen.
No hay forma de proteger la descarga de imágenes. Esto se debe a que el navegador debe descargar la imagen para que el usuario pueda verla. Hay trucos (como el fondo transparente que especificó) para restringir ciertas operaciones, como la imagen, haga clic con el botón derecho y guarde en la carpeta de caché del navegador, pero no hay forma de proteger realmente las imágenes.
No, en realidad, no hay forma de evitar que un usuario haga una tarea en particular. ¡Pero siempre puedes tomar medidas! Los sitios web de intercambio de imágenes cuentan con un gran equipo de desarrolladores que trabajan día y noche para crear dicho algoritmo y evitar que el usuario guarde los archivos de imagen.
Primera forma
Prueba esto:
$(''img'').mousedown(function (e) {
if(e.button == 2) { // right click
return false; // do nothing!
}
}
Por lo tanto, el usuario no podrá hacer clic en la opción Guardar imagen como ... del menú y, a su vez, no tendrá la oportunidad de guardar la imagen.
Segunda forma
Otra forma es usar background-image . De esta forma, el usuario no podrá hacer clic derecho y Guardar la imagen como ... Pero aún puede ver los recursos en el Inspector.
Tercera forma
Aunque soy nuevo en este tema, hace unos días estaba navegando por Flickr cuando intenté hacer clic derecho, no me dejó hacer nada. Que a su vez fue el primer método que te proporcioné. Luego traté de ir a ver al inspector, allí no encontré nada. ¿Por qué? Ya que estaban usando background-image y al mismo tiempo estaban usando data:imagesource como su ubicación.
Lo cual fue increíble para mí también. Puede evitar que el usuario guarde los archivos de imagen de esta manera fácilmente.
Se lo conoce como esquema de URI de datos: http://en.wikipedia.org/wiki/Data_URI_scheme
Nota
Recuerda, hermano, cuando dejas que un usuario navegue por tu sitio web, le estás otorgando permisos de LECTURA en el servidor para que pueda leer todos los archivos sin ningún problema. Lo mismo es el problema con los archivos de imagen. Puede leer los archivos de imagen y luego puede guardarlos fácilmente. Él descarga las imágenes desde el primer lugar cuando navega por su sitio web. Entonces, no hay problema para que los guarde en su disco.
Otra forma de eliminar el menú contextual "guardar imagen" es usar algo de CSS. Esto también deja intacto el resto del menú de contexto.
img {
pointer-events: none;
}
Hace que todos los elementos img no sean reactivos a ningún evento del mouse, como arrastrar, desplazarse, hacer clic, etc.
Ver spec para más información.
Si solo es una imagen, JavaScript no es realmente necesario. Intenta usar esto en tu archivo html:
<img src="sample-img-15.jpg" alt="#" height="24" width="100" onContextMenu="return false;" />
Primero, tenga en cuenta que nunca podrá detener por completo una imagen que se está descargando porque, si el usuario está viendo la imagen, ya la ha descargado (temporalmente) en su navegador.
También tenga en cuenta que la mayoría de los usuarios probablemente no sean desarrolladores web, pero aún pueden examinar el código fuente.
Realmente desalentó la desactivación del clic derecho, esto puede ser extremadamente frustrante para el usuario final y no es seguro de todos modos ya que la imagen puede ser arrastrada a una nueva ventana y descargada.
Sugeriría el método utilizado por es decir,
img {
pointer-events: none;
}
pero con una mejora:
Primero, eliminemos la url de su imagen y le agreguemos atributos de id . Al igual que:
<img id="cutekitten">
Luego tenemos que agregar un poco de JavaScript para mostrar la imagen. Manténgalo alejado de la etiqueta <img> que intenta proteger:
document.getElementById("cutekitten").src = "http://placekitten.com/600/450";
Ahora necesitamos usar el CSS:
#cutekitten {
pointer-events: none;
}
La imagen no se puede arrastrar a una nueva ventana y también se puede descargar con un clic derecho.
Otro método más que puedes usar es la etiqueta de embed :
<embed src="http://placekitten.com/600/450"></embed>
Esto evitará el clic derecho.