
Impedir el copy-paste de una imagen que has publicado
Ya que el último post sobre añadir el copyright a una imagen tuvo tanto éxito, os voy a explicar otra manera de proteger vuestra propiedad intelectual, e impedir el copy-paste de una imagen que has publicado en la red.
Por supuesto tengo que advertiros de que no es un sistema definitivo, hay montones de triquiñuelas para que, si alguien está verdaderamente interesado en conseguirla, lo pueda hacer, pero se lo ponemos más difÃcil, sobre todo a aquellos que no tengan conocimientos de web o programación.
Cómo impedir el copy-paste de una imagen
Voy a explicar tres métodos para impedir el copy-paste, lo único que necesitas es acceso al código fuente. Éstos son los mecanismos:
Desabilitar la función de botón derecho en la imagen
Esta función es para mà la más útil de todas. Tú decides cuando y en qué imagen implementarla, y sólo afecta a dicha fotografÃa o imagen que quieres proteger. Se hace añadiendo una etiqueta de bloqueo con un aviso para que no puedan deplegar el menú para copiar la imagen. Es una sencilla lÃnea de código que no afecta al tiempo de carga de la página y que se pone del siguiente modo:
<img="no-copiar.png" oncontextmenu="return false"/>
Prueba a hacer clic con el botón derecho:
Derivar la imagen a una página en blanco
Este es otro sistema para evitar la copia de imágenes. En lugar de cargar la imagen directamente, dirigimos el src a una “imagen en blanco” (URI de datos), y posteriormente incluimos la imagen deseada mediante un style. De este modo, la opción de botón derecho está activa, pero no se guardará la imagen ni se abrirá en otra pestaña, ya que nos dirigirá al src.
Se harÃa asÃ:
<img style="background-image:url(no-copiar2.png);" src="data:image/gif;base64,
R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="400" height="180">
Inconvenientes:
- Como veis, hay que añadir valores fijos a la imagen, por lo que nos cargamos el responsive, si la imagen es más ancha que la pantalla del dispositivo, irá desapareciendo al no ser más que un fondo.
- Añadir el código css en el propio html es ensuciar el código y ralentizar la página; también la ralentizarÃamos si crearamos clases para cada imagen dentro de un archivo css independiente.
Desabilitar la función de botón derecho en toda la página
Esta opción puede seros útil si vais a incluir muchas fotos en una misma página, y no queréis estar incluyendo código en cada una de ellas. SerÃa añadiendo una lÃnea de código en javascript de esta manera:
<script type="text/javascript" language="Javascript">
document.oncontextmenu = function(){return false}
</script>
Sin embargo no la recomiendo por varias razones:
- Las peticiones de javascript ralentizan el tiempo de carga de la página.
- Bloquearéis las opciones de botón derecho de otros complementos, como abrir enlaces en otras pestañas, o aplicaciones automáticas como buffer, haciendo menos deseable que se comparta vuestro contenido.
- El texto será igualmente apto para copiar y pegar, luego no os sirve si lo que queréis es proteger el contenido Ãntegro de la página.
Impedir la copia de cualquier contenido
Si lo que queremos es impedir la copia de todo el contenido, tanto imágenes como texto, lo que debemos hacer es añadir estas funciones dentro del div donde se encuentre el contenido que queramos bloquear.
<div class="contenido" oncontextmenu='return false' ondragstart='return false'
onmousedown='return false' onselectstart='return false'>
Ahora no puedes seleccionar ni este texto, ni la imagen a continuación
Espero que os sean útiles estos consejos, aunque ya os digo, si alguien quiere hacerse con vuestras imágenes, creedme, que métodos hay, pero al menos se lo pondremos más difÃcil a aquellos que quieran aprovecharse de nuestro contenido único.
Si tenéis cualquier duda, estaré encantada de contestarlas, asà que no seais tÃmidos y comentad lo que queráis
hola, necesito colocar tu primer codigo
pero no se donde! tengo un blog, http://www.cuerpogris.org
y no se donde debo entrar para colocar esto, ojala me ayudes
saludod y gracias!
Hola Claudia,
¡GUAU! Qué pasada de body-painting ¡me encanta!
Verás, es muy sencillo:

Sube la imagen que quieras a blogger
y después cambia a modo ‘HTML’

es donde tienes que escribir oncontextmenu=”return false”
Dentro de la etiqueta
¡Espero que te funcione!